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          


        

Answer 1

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;
}