CSS3 box-shadow Property


Example

Add a box-shadow to a <div> element:

div {
    box-shadow: 10px 10px 5px #888888;
}

Try it yourself »

More "Try it Yourself" examples below.


Definition and Usage

The box-shadow property attaches one or more drop-shadows to the box.

Default value: none
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS3
JavaScript syntax: object.style.boxShadow="10px 20px 30px blue" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
box-shadow 10.0
4.0 -webkit-
9.0 4.0
3.5 -moz-
5.1
3.1 -webkit-
10.5

CSS Syntax

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

Note: The box-shadow property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional inset keyword. Omitted lengths are 0.

Property Values

Value Description Play it
none Default value. No shadow is displayed Play it »
h-shadow Required. The position of the horizontal shadow. Negative values are allowed Play it »
v-shadow Required. The position of the vertical shadow. Negative values are allowed Play it »
blur Optional. The blur distance Play it »
spread Optional. The size of shadow. Negative values are allowed Play it »
color Optional. The color of the shadow. The default value is black. Look at CSS Color Values for a complete list of possible color values.

Note: In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all.
Play it »
inset Optional. Changes the shadow from an outer shadow (outset) to an inner shadow Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Examples

More Examples

Images thrown on the table
This example demonstrates how to create "polaroid" pictures and rotate the pictures.


Related Pages

CSS3 tutorial: CSS3 Borders

HTML DOM reference: boxShadow property



SHARE THIS PAGE

COLOR PICKER

colorpicker





Search w3schools.com:

Translate w3schools.com: