Inner rounded shadows inside div

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

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:

1. I am unable to implement linear gradient to the shadow.
2. 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 2

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>

HaPpY Coding ??