Computers & ProgrammingCSS3Web Development

CSS3 Box-Shadow Overview

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.

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 , that keyword that can be used to create 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.

PropertyDescription
h-shadowRequired value for the horizontal shadow. Negative values are allowed.
v-shadowRequired value for the vertical shadow. Negative values are allowed.
blurOptional value for blur distance. The larger this value, the bigger the blur.
spreadOptional value for the size of shadow. Positive values will cause the shadow to expand, negative values will cause the shadow to shrink.
colorOptional value for the color of the shadow.
insetOptional value, default is outset. Optional value is inset.
A2D4Ecbf57694C2C84B645C653D65Eed

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 supported 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 RGB value.

F98150Bbd9A8410F88E1924C454Ffdff

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;

Leave a Comment

Your email address will not be published.

Scroll to Top