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 />

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

CodePudding user response：

• 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 >
  <span>Interior content</span>
</div>

CodePudding user response：

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 ></div>

---

Reference: How to create an inner shadow using CSS

CodePudding user response：

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 />
<div ></div>
<div>

HaPpY Coding