Have an issue with box-shadow Inset bottom only

Question

I am using box-shadow to create an inner shadow...

box-shadow: inset 0 0 10px #000000;
-moz-box-shadow:    inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;

...but would like the inner shadow to come in from the bottom only. I have tried several ways of trying to make this work but can't... How would I do this with box-shadow?

For another type of solution see: https://stackoverflow.com/a/59428355/7910454. — leonheess, Dec 20 '19 at 16:20

score 154 · Accepted Answer · edited Dec 20 '19 at 16:18

154

Use a negative value for the fourth length which defines the spread distance. This is often overlooked, but supported by all major browsers. See this Fiddle for the result.

div {
  background: red;
  height: 100px;
  width: 200px;
  -moz-box-shadow: inset 0 -10px 10px -10px #000000;
  -webkit-box-shadow: inset 0 -10px 10px -10px #000000;
  box-shadow: inset 0 -10px 10px -10px #000000;
}

<div></div>

edited Dec 20 '19 at 16:18

leonheess

16,068
14
77
112

answered Aug 22 '12 at 22:01

ACJ

2,499
3
24
27

You’re welcome. It is documented (to an extend) here: [CSS Backgrounds and Borders Module Level 3](http://www.w3.org/TR/css3-background/#box-shadow). – ACJ Aug 22 '12 at 22:05
1

`box-shadow` should be after `-webkti-box-shadow` and `-moz-box-shadow` – Shlomi Hassid May 25 '15 at 18:08
Agreed, @ShlomiHassid. I edited both the snippets to reflect this. – ACJ May 27 '15 at 12:08
Not working on firefox nightly (Oct 20, 2015) http://postimg.org/image/3yq7nasih/ – Ethan McTague Oct 20 '15 at 15:43
Works just fine for me, @Jakob Abfalter. Do note that different user agents have different rounding mechanisms, causing specific settings not to be visible/notable in specific contexts. – ACJ Aug 08 '17 at 09:38

Shlomi Hassid · Answer 2 · 2015-08-22T00:13:08.843

JSnippet DEMO

On top only:

-moz-box-shadow:    inset  0  10px 10px -10px grey;
-webkit-box-shadow: inset  0  10px 10px -10px grey;
 box-shadow:        inset  0  10px 10px -10px grey;

On bottom only:

-moz-box-shadow:    inset  0 -10px 10px -10px grey;
-webkit-box-shadow: inset  0 -10px 10px -10px grey;
 box-shadow:        inset  0 -10px 10px -10px grey;

On top and bottom only:

-moz-box-shadow:    inset  0  10px 10px -10px grey, 
                    inset  0 -10px 10px -10px grey;
-webkit-box-shadow: inset  0  10px 10px -10px grey, 
                    inset  0 -10px 10px -10px grey;
 box-shadow:        inset  0  10px 10px -10px grey, 
                    inset  0 -10px 10px -10px grey;

Quick Example

.shadow-top {
    -moz-box-shadow:    inset  0  10px 10px -10px grey;
    -webkit-box-shadow: inset  0  10px 10px -10px grey;
     box-shadow:        inset  0  10px 10px -10px grey;
}
.shadow-bottom {
    -moz-box-shadow:    inset  0 -10px 10px -10px grey;
    -webkit-box-shadow: inset  0 -10px 10px -10px grey;
     box-shadow:        inset  0 -10px 10px -10px grey;
}
.shadow-top-bottom {
    -moz-box-shadow:    inset  0  10px 10px -10px grey, 
                        inset  0 -10px 10px -10px grey;
    -webkit-box-shadow: inset  0  10px 10px -10px grey, 
                        inset  0 -10px 10px -10px grey;
     box-shadow:        inset  0  10px 10px -10px grey, 
                        inset  0 -10px 10px -10px grey;
}

div { display:inline-block; margin-right:15px; width:150px; height:100px; background:yellow; }

<div class='shadow-top'></div>
<div class='shadow-bottom'></div>
<div class='shadow-top-bottom'></div>

Have an issue with box-shadow Inset bottom only

2 Answers2

Linked