What is the CSS box-shadow property and why should I use it?
The box shadow property is a useful tool that allows the user to create multiple drop shadows around an element - in order, either, to create the illusion that the element is raised above the objects behind it, or to make the element look as though it were depressed in the surrounding object.
How does it work?
The box-shadow property requires at least two values: the horizontal offset value and the vertical offset value. A positive value assigned to the horizontal offset property will cast a shadow to the right of the element while a negative one will cast a shadow to the left. Similarly, a positive value assigned to the vertical offset property will cast a shadow downwards while a negative value will cast a shadow upwards.
Some optional properties are:
- Blur: A value that determines the blur radius applied to edge of the shadow. The default value is 0, which means that the edge of the shadow will be sharp. The higher the value the more blurred the edge will be.
- Spread: A value that controls the spread radius which in turn, determines how far the shadow will reach out. A positive value will increase the spread radius while a negative value will decrease it. The default value is 0.
- Color: An RGBA value that determines the color of the shadow. The default color is black.
- Inset: If you supply the "inset" keyword, the shadow(s) will appear inside of the element instead of the default outside.
Note that you can assign multiple shadows to a single element simply by separating each shadow's set of values with a comma.
Browser Support
Browser support for box-shadow is growing as of late. IE9 and up can now display the property correctly while Firefox versions 4.0 and up no longer need the -moz- prefix. Similarly Chrome versions 10.0 and up as well as Safari versions 5.1 and up no longer need the -webkit- prefix. According to caniuse.com 84.04% of global users have browser support.
Examples
Drop Shadow
#shadow_1 {
box-shadow:8px 8px 5px 2px #AAAAAA;
}
Two Shadows
#shadow_2 {
box-shadow:1px 1px 5px 5px #AAAAAA, -1px -1px 5px 5px #AAAAAA;
}
Sharp Shadow
#shadow_3 {
box-shadow: 5px 5px 0px 5px #AAAAAA;
}
Inset Shadow
#shadow_4 {
box-shadow: inset 8px 8px 5px 2px #AAAAAA, inset -8px -8px 5px 2px #AAAAAA;
}
Shadow On One Side Only
#shadow_5 {
box-shadow: 0px 11px 5px -3px #AAAAAA;
}
In over your head?
Whether you're looking for a small change or a complete overhaul, our team of experts can help get your web project back on track.
Click here to request a free quote.
