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;
Did you find the page informational and useful? Share it using one of your favorite social sites.
Recommended Books & Training Resources
