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

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