Shadow Inside of a Div

Shadow inside of a div

In CSS3 there's box-shadow which can also be inset to do exactly what you need. This is supported by the following browsers:

• Chrome >= 10.0 (>= 4.0 with -webkit prefix)
• Firefox >= 4.0 (>= 3.5 with -moz prefix)
• IE >= 9.0
• Opera >= 10.5
• Safari >= 5.1 (>= 5.0 with -webkit prefix)

Inner rounded shadows inside div

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

Box-shadow of div over inner div

Set the position of the child to relative and the z-index to -1:

.wrapper {  width: 200px;  height: 100px;  border: 1px grey solid;  box-shadow: inset 40px 0 10px -10px #bbbbbb;}
.inner {  width: 180px;  height: 80px;  margin: 10px;  background-color: lightblue;  position:relative;  z-index:-1;}

<div class="wrapper">
  <div class="inner">
  </div>
</div>

HTML/CSS border shadow inside object

border-shadow can take up to 6 arguments (see the mdn doc #values for a complete definition):

• offset-x: horizontal offset
• offset-y: vertical offset
• blur-radius: blur effect of the outside of the shadow
• spread-radius: solid color (without blur) thickness
• color: no need for a description here :)
• inset: (facultative) if you want your shadow to go inside your block

In order to achieve what you want, you need to use the blur-radius & spread-radius instead of the offset-xy you are currently using.

Here's an exemple:

div{  display: inline-block;  margin: 20px;  padding: 5px;  background-color: #aaf;}
#id1{  box-shadow: 0 0 0 15px #55f;}
#id2{  box-shadow: 0 0 15px 15px #55f;}
#id3{  box-shadow: 0 0 0 2px #55f;}
#id4{  box-shadow: 0 0 3px 3px #55f; /* here's what you want */}

<div id="id1">sharp thick border without blur</div>
<div id="id2">thick border with blur</div>
<div id="id3">thin border without blur</div>
<div id="id4">thin border with blur</div>

is it possible to give the shadow inside the container?

Yes it is possible to add inner-shadow to an element, you just need to add inset along with your properties in box-shadow.

The presence of the inset keyword changes the shadow to one inside the
frame (as if the content was depressed inside the box). Inset shadows
are drawn inside the border (even transparent ones), above the
background, but below content.

.part-two{                float: left;                height:300px;                width: 200px;                background-color:green;                box-shadow: inset 0px 1px 10px 20px orange;}

<div id="part-two" class="part-two"></div>

How to make div shadow come over its children?

Agree with Vitalii Chmovzh answer, but in case you don't want any space by padding.

So just use this for your img tag.

img{
  display: block;
  position:relative;
  z-index:-1;
}

Without changing sizes of your box model.

Updated fiddle

Text shadow does not fire inside DIV but does in BODY

Thats because the background from #backinblack is placed above the shadow and therefore blocking it (if you remove the background from #backinblack, you'll see, the shadow is actually there), so you'll need a z-index on your #backisblack too, which only works if you set the divs position to absolute.

Add

  position:absolute;
  z-index:-1;
  width:100%;

to your #backinblack to change this.

More on the z-index: https://www.w3schools.com/cssref/pr_pos_z-index.asp

@import url('https://fonts.googleapis.com/css?family=Pirata+One|Rubik:900');#backinblack {  justify-content: center;  align-items: center;  min-height: 25vh;  background-color: #141E30;  background: linear-gradient(to right, #24243e, #141E30, #0f0c29);  position:absolute;  z-index:-1;  width:100%;}
#backinblack h1 {  text-transform: Uppercase;  margin-bottom: .5em;  font-family: 'Rubik', sans-serif;  font-size: 6rem;  color: #E4E5E6;}
#backinblack h1 {  position: relative;  background: linear-gradient(to right, #24243e, #141E30, #0f0c29);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}
#backinblack h1:before,#backinblack h1:after {  content: attr(data-text);  position: absolute;  top: 0;  left: 0;}
#backinblack h1:before {  z-index: -1;  text-shadow: -0.001em -0.001em 1px rgba(255, 255, 255, .15)}
#backinblack h1:after {  z-index: -2;  text-shadow: 10px 10px 10px rgba(0, 0, 0, .5), 20px 20px 20px rgba(0, 0, 0, .4), 30px 30px 30px rgba(0, 0, 0, .1);  mix-blend-mode: multiply;}

<div id="backinblack">  <h1 data-text="test">test</h1></div>

---

Related Topics