<div class="box inner-shadow"></div>
/* Setting up a box to add the inner shadow to */
.box {
margin: 4rem auto;
width: 50%;
padding: 1rem;
text-align: center;
border-radius: 1rem;
}
/* Inner shadow with multiple insets */
.inner-shadow {
width: 150px;
height: 150px;
box-shadow: inset rgba(60, 70, 85, 0.5) 0px 0px 40px 0px, inset rgba(60, 70, 85, 0.5) 0px 0px 40px 0px, inset rgba(0, 0, 0, 1) 0px 0px 36px -24px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.