# CSS Backgrounds and Borders Module Level 3: Box Shadow Chapter

## [LONGSTATUS] [DATE]

This version:
  https://drafts.csswg.org/css3-background/box-shadow
Latest version:
  [LATEST]
Previous versions:
  https://www.w3.org/TR/2005/WD-css3-background-20050216
Editors:
  Bert Bos (W3C)
  Elika J. Etemad (Invited Expert)
  Brad Kemper (Invited Expert)

## Abstract

This document contains the definition of the 'box-shadow' property, which has been removed from the CSS3 Backgrounds and Borders Module until stabilized.

## Status of this document

This is a scrappy bit of an Editor's Draft, is totally unstable, and has no official status whatsoever. Treat it as you would a post-it note on the editors' desk.

### The 'box-shadow' property

Name: | box-shadow
Value: | none | <shadow> [ , <shadow> ]*
Initial: | none
Applies to: | all elements
Inherited: | no
Percentages: | N/A
Computed value: | any <length> made absolute; any color computed; otherwise as specified

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, omitted colors are a UA-chosen color.

Where

    <shadow> = inset? && [ <length>{2,4} && <color>? ]

The components of each <shadow> are interpreted as follows:

- The first length is the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.
- The second length is the vertical offset. A positive value offsets the shadow down, a negative one up.
- The third length is a blur radius. Negative values are not allowed. If it is 0, the shadow is sharp, otherwise the larger the value, the more the shadow is blurred. The exact algorithm is not specified.
- The fourth length is a spread radius. Positive values cause the shadow to grow in all directions by the specified radius. Negative values cause the shadow to shrink. The shadow should not change shape when a spread radius is applied: sharp corners should remain sharp.
- The color is the color of the shadow.
- The ''inset'' keyword, if present, changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it).

An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only: it is not drawn inside the border-box of the element.

An inner box-shadow casts a shadow as if everything outside the padding edge were opaque. The inner shadow is drawn inside the padding edge only: it is not drawn outside the padding box of the element.

If the box has a nonzero 'border-radius', the shadow is rounded in the same way.

This is still under discussion. Please send comments to www-style.

However, if the box has a border-image, the shadows drawn differently: they are masked by the border-image instead of the border area as follows.

- For an outer shadow, the shadow is created by assuming that the padding box is opaque, and then combining that with the border-image to create an alpha-channel mask for the shadow. Spread values are interpreted as increasing the size of the padding box and causing the border-image mask to be resized accordingly. The resulting shadow is only drawn outside the boundaries of the padding box.
- For an inner shadow, the shadow is created by assuming that everything outside the border box is opaque, and then combining that with the border-image to create an alpha-channel mask for the shadow. Spread values are interpreted as decreasing the size of the border box and causing the border-image mask to be resized accordingly. The resulting shadow is only drawn inside the boundaries of the border box.

If the UA is unable to create shadows that respect the transparent and partially-transparent aspects of the border-image, it must not create a shadow at all. The UA may ignore spread values when drawing shadows for a border-image.

If an element has multiple boxes, all of them get drop shadows, but shadows are only drawn where borders would also be drawn, see 'box-break'.

The shadow effects are applied front-to-back: the first shadow is on top and the others are layered behind. Shadows do not influence layout and may overlap other boxes or their shadows. In terms of stacking contexts and the painting order, the outer shadows of an element are drawn immediately below the background of that element, and the inner shadows of an element are drawn immediately above the background of that element (below the borders and border image, if any).

Shadows never affect layout, and do not trigger scrolling or increase the size of the scrollable area.

Below are some examples of an orange box with a blue border being being given a drop shadow.

    border:5px solid blue;
    background-color:orange;
    width: 144px;
    height: 144px;
    border-radius: 20px;
    border-radius: 0;
    box-shadow:
      rgba(0,0,0,0.4)
      10px 10px;
    box-shadow:
      rgba(0,0,0,0.4)
      10px 10px
      inset
    box-shadow:
      rgba(0,0,0,0.4)
      10px 10px 0
      10px /* spread */
    box-shadow:
      rgba(0,0,0,0.4)
      10px 10px 0
      10px /* spread */
      inset

The ''box-shadow'' property applies to the ''::first-letter'' pseudo-element, but not the ''::first-line'' pseudo-element. Outer shadows have no effect on internal table elements in the collapsing border model. If a shadow is defined for single border edge in the collapsing border model has multiple border thicknesses (e.g. an outer shadow on a table where one row has thicker borders than the others, or an inner shadow on a rowspanning table cell that adjoins cells with different border thicknesses), the exact position and rendering of its shadows are undefined.

## References

### Normative references

### Other references

## Property index

## Index