Menu
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?
829
Use the box-shadow Property to Set the Bottom Box Shadow in CSS. We can use the box-shadow property to set the shadow only at the bottom of the box. The box-shadow property sets the shadow of the selected element.
The presence of the inset keyword changes the shadow to one inside the frame (as if the content was debossed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content.
essentially the shadow is the box shape just offset behind the actual box. in order to hide portions of the shadow, you need to create additional divs and set their z-index above the shadowed box so that the shadow is not visible.
The blur radius (required), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be, and the further out the shadow will extend. For instance a shadow with 5px of horizontal offset that also has a 5px blur radius will be 10px of total shadow.
This code creates a 5px black inset shadow on the left side of the box only: box-shadow: inset 5px 0 5px -5px #000; Just repeat the needed shadow width in the values to get the effect. You can use multiple shadows to get inset shadows e.g. for top and bottom only.
This code creates a 5px black inset shadow on the left side of the box only: box-shadow: inset 5px 0 5px -5px #000; Just repeat the needed shadow width in the values to get the effect. You can use multiple shadows to get inset shadows e.g. for top and bottom only. This code would create a 10px red inset shadow in top and bottom:
The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
Just set the background-color to ‘transparent’ and add the word ‘inset’ to the box-shadow. For example: body { background-color: transparent; box-shadow: inset 0px 0px 5px #666;
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>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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
