The CSS3 box-shadow property allows web designers to implement drop shadows on box elements. Developers can specify box-shadows values for color, size, blur and offset. If a border-radius is
specified on the element with a box shadow, the box shadow takes on the same rounded corners.
Browser Support
The box-shadow property is supported in Internet Explorer 9+, Firefox, Chrome, Opera, and Safari. Earlier versions of Internet Explorer do not support the box-shadow property.
Your browser
may support the box-shadow property.
Box-Shadow Syntax
The box-shadow property can accept a comma-separated list of up to six values, two of which are required. The order of values are as follows: horizontal offset, vertical offset, blur distance, spread distance,
color value, and 'inset' keyword that can be used to creating an inner shadow.
box-shadow: h-shadow v-shadow blur spread color inset;
H-shadow and v-shadow values are required. Omitted lengths default to 0.
| Property | Description |
|---|
| h-shadow | Required value for the horizontal shadow. Negative values are allowed |
| v-shadow | Required value for the vertical shadow. Negative values are allowed |
| blur | Optional value for blur distance. The larger this value, the bigger the blur. |
| spread | Optional value for size of shadow. Positive values will cause the shadow to expand, negative values will cause the shadow to shrink. |
| color | Optional value for the color of the shadow. |
| inset | Optional value, default is outset. Optional value is 'inset' |
Examples
Here are some examples that should work across the browsers that support the border-radius property. For older mozilla (Firefox: -moz-box-shadow) and webkit (Chrome, Safari, etc.: -webkit-box-shadow) browsers, you can use the vendor prefix. However, at the time of
this writing, the box-shadow property is support by most browsers in use. You can use the border-radius property in combination with the box-shadow property. In addition, when setting the color of the box-shadow, you can apply
an opacity value if you specify the RGBa value.
<style>
#A {box-shadow: 25px 25px;}
#B {box-shadow: 25px 25px 10px;}
#C {box-shadow: 25px 25px 10px 5px;}
#D {box-shadow: 25px 25px 10px 5px rgba(127,127,127,0.7);}
#E {box-shadow: 25px 25px 10px;border-radius:10px;}
#F {box-shadow: 25px 25px 10px rgba(127,127,127,0.7);border-radius:10px;}
</style>
While not a common approach, you can apply multiple box-shadows on the element by separating those sets of values using a comma. For example.
box-shadow: h-shadow v-shadow blur spread color inset, h-shadow v-shadow blur spread color inset;
Please help us spread the word by socializing it today!
Did you find something wrong with the information on this page? Please take a moment to report it to us
so that we can continue to improve the quality of the information on this site. Click here to
report an issue with this page.
Recommended Books & Training Resources
