CSS - box-shadow Property

CSSbox-shadowproperty adds a shadow effect around an element. One or more shadow effects can be added, separated by commas. The box shadow is described by horizontal and vertical offsets relative to the element, blur, spread radius and color.

Syntax

box-shadow: none | h-offset v-offset blur spread color | inset | initial | inherit;

Property Values

ValueDescriptionnoneThis value does not show any shadow. Defaulth-offsetIt defines the horizontal offset. Positive values place the shadow to the right of box, negative values place the shadow to the left of box. Required.v-offsetIt defines the vertical offset. Positive values place the shadow below the box, negative values place the shadow above the box. RequiredblurIt defines the blur radius. Higher values have higher blur. Optional.spreadIt defines the spread radius. Positive values increases size of shadow, negative values decreases size of shadow. OptionalcolorIt defines the color of the shadow. Different formats of color can be used. Default is color of text. OptionalinsetIt changes the outer shadow to inner shadow.initialIt sets the property to its default value.inheritIt inherits the property from the parent element.

Examples of CSS Box Shadow Property

The following examples explain thebox-shadowproperty with different values.

Box Shadow Property with Box Shadow

To set a shadow to a box, we require to specify atleast two values, one for thehorizontaloffset and the other for theverticaloffset. Depending on the signs of the values, the position of the shadow changes accordingly. This is shown in the following example.

Example

Box Shadow Property with Blur

To set a blur to the shadow of a box, we require to specify three values. The first two values are the horizontal and vertical offsets while the third value is for the blur, higher the third value greter will be the blur. This is shown in the following example.

Example

Box Shadow Property with Spread Value

To set the size of the shadow of a box, we require to specify four values. The first two values are the horizontal and vertical offsets while the third value is for the blur, the fourth value decides the size of the shadow, positive values result in larger shadows while negative values result in smaller shadows. This is shown in the following example.

Example

Box Shadow Property with Color Value

To set a color to the shadow of a box, we require to specify atleast three values. The first two values are the horizontal and vertical offsets while the third value is for the color, the color can be specified along with blur and spread as well. The color can be specified in different format (eg. color names, hexadecimal values, rgb values etc.). This is shown in the following example.

Example

Box Shadow Property with Inset Value

To let the box shadow appear inside the element and not outside the element, we use theinsetvalue. This is shown in the following example

Example

Box Shadow Property with Multiple Shadows

To have multiple shadows for a box, each style must be comma separated. The shadows will appear in the order specified inbox-shadowproperty. This is shown in the following example.

Example

Supported Browsers

css_reference.htm