Inner rounded shadows inside div - html

Question

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?

Answer 1

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>

Answer 2

CSS box-shadow
I think the answer posted by #isherwood works as the best one for your use-case. But, there is a way to make the shadow show on the inside of the element by setting the last parameter of box-shadow as inset.
There are a few catches for this solution though. A few things which I could not achieve:
I am unable to implement linear gradient to the shadow.
I am unable to give a border-radius to the inner boundary of the shadow.
div.box {
background: linear-gradient(90deg, hsl(26, 68%, 26%), hsl(26, 68%, 45%));
height: 100px;
width: 100px;
box-shadow: 0 0 0 12px hsl(26, 68%, 35%) inset;
border-radius: 10px;
}
<div class="box"></div>
Reference: How to create an inner shadow using CSS

Answer 3

Well, I edited your code. Here is the demo.
Basically, I added one more div and added some style. Hope it will give you an idea.
Also, I added a snippet down below:-
.box {
box-sizing: border-box;
border: solid 0.01rem #2e2e2e;
border-radius: 15px;
width: 100px;
height: 100px;
background: red;
padding: 10px 0px 10px 0px;
}
.inner-div {
box-sizing: border-box;
border-radius: 15px;
width: 78px;
height: 78px;
background: #ee1717;
margin: 0 auto;
}
<div class="box"/>
<div class="inner-div"></div>
<div>