Inner rounded shadows inside div

Issue

I have a div which looks something like this:

.box{
 box-sizing: border-box;
 border: solid 0.01rem #2e2e2e;
 border-radius: 3px;
 width:100px;
 height:100px;
 background:red;
 }

<div class="box"/>

And I'm trying to achieve this effect. How can I make this box look with such shadows from the inside of the div?

Solution

• linear gradient
• blur filter
• absolute positioning
• pseudo-elements
• flexbox

.box {
  box-sizing: border-box;
  border-radius: 10%;
  width: 100px;
  height: 100px;
  background: linear-gradient(270deg, red, #c10606);
  position: relative;
}

.box:before {
  position: absolute;
  content: '';
  top: 10%;
  right: 10%;
  bottom: 10%;
  left: 10%;
  background: linear-gradient(90deg, red, #c10606);
  border-radius: 12%;
  filter: blur(1px);  /* optional for a softer effect */
}

/* optional layout and styling for box contents */
.box {
  display: flex;
  align-items: center;
  text-align: center;
  font-family: arial;
  color: #ddd;
  font-weight: bold;
}

.box * {
  position: relative;  /* puts interior content over the pseudo-element */
}

<div class="box">
  <span>Interior content</span>
</div>

Answered By - isherwood