CSS PROPERTIES
Expand All | Collapse All
CSS AT-RULES

CSS3 box-shadow Property

Topic: CSS3 Properties ReferencePrev|Next

Description

The box-shadow CSS property applies one or more shadow effects to an element's box.

The following table summarizes the usages context and the version history of this property.

Default value: none
Applies to: All elements. It also applies to ::first-letter.
Inherited: No
Animatable: Yes. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

box-shadow: 
shadow1 [, shadow2, ... shadowN] | none | initial | inherit
where shadow is: [ inset [ offset-x offset-y blur-radius spread-radius color ] ]

The example below shows the box-shadow property in action.

.shadow{
    width: 150px;
    height: 150px;
    background: #ccc;
    border: 1px solid #999;
    box-shadow: 2px 2px 4px 2px #999;
}

You can use the inset keyword to apply the shadow inside of the element's box. Inset shadows are drawn inside the border, above the background, but below content.

.shadow-inside{
    width: 150px;
    height: 150px;
    background: #ccc;
    border: 1px solid #999;
    box-shadow: inset 0 0 6px 2px #999;
}

Property Values

The following table describes the values of this property.

Value Description
Required — The following values must be specified for the property to be valid.
offset-x The first length value specifies the horizontal distance of the shadow. A positive value draws a shadow that is offset to the right of the box, whereas a negative value offsets the shadow to the left.
offset-y The second length value specifies the vertical distance of the shadow. A positive value offsets the shadow down, whereas a negative value offsets the shadow above the element.
Optional — The following values are optional.
blur-radius The third length value is a blur distance. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Default value is 0, the shadow is sharp. Negative values are not allowed.
spread-radius The fourth length is a spread distance. Positive values cause the shadow shape to expand in all directions by the specified radius. Negative values cause the shadow shape to contract.
color The color is the color of the shadow. This value can be any supported color value. If not specified, it is usually the value of the color property.
inset If present, changes the drop shadow from an outer shadow to an inner shadow. Inset shadows are drawn inside the border, above the background, but below the content the element.
none No shadow will be displayed. This is default value.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element box-shadow property.

Browser Compatibility

The box-shadow property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 3.5+ -moz-, 4+
  • Google Chrome 4+ -webkit-, 10+
  • Internet Explorer 9+
  • Apple Safari 3.1+ -webkit-, 5.1+
  • Opera 10.5+

Further Reading

See tutorial on: CSS3 Drop Shadows, CSS Pseudo-elements.

Related properties: text-shadow.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties