CSS box-shadow Property

<!--

main_leaderboard, all: [728,90][970,90][320,50][468,60]

-->

CSS box-shadow Property

❮ Previous
Complete CSS Reference
Next ❯

Example

Add shadows to different <div> elements:

#example1 {
box-shadow: 5px 10px;
}

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

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The box-shadow property attaches one or more shadows to an element.

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

<!--

mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]

-->

CSS Syntax

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

Note: To attach more than one shadow to an
element, add a comma-separated list of shadows (se "Try it Yourself" example
below).

Property Values

Value	Description	Play it
none	Default value. No shadow is displayed	Play it »
h-offset	Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box	Play it »
v-offset	Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box	Play it »
blur	Optional. The blur radius. The higher the number, the more blurred the shadow will be	Play it »
spread	Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow	Play it »
color	Optional. The color of the shadow. The default value is the text color. 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

Tip: Read more about allowed values (CSS length units)

More Examples

Example

Add a blur effect to the shadow:

#example1 {
box-shadow: 10px 10px 8px #888888;
}

Try it Yourself »

Example

Define the spread radius of the shadow:

#example1 {
box-shadow: 10px 10px 8px 10px #888888;
}

Try it Yourself »

Example

Define multiple shadows:

#example1 {
box-shadow: 5px 5px blue, 10px 10px
red, 15px 15px green;
}

Try it Yourself »

Example

Add the inset keyword:

#example1 {
box-shadow: 5px 10px inset;
}

Try it Yourself »

Example

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

div.polaroid {
    width: 284px;

padding: 10px 10px 20px 10px;
    border: 1px solid
#BFBFBF;
    background-color: white;

box-shadow: 10px 10px 5px #aaaaaa;
}

Try it Yourself »

CSS tutorial: CSS Rounded Corners

HTML DOM reference: boxShadow property

❮ Previous
Complete CSS Reference
Next ❯

搜尋此網誌

trjhtr