Revision 28085 of box-shadow

  • Revision slug: CSS/Box-shadow
  • Revision title: box-shadow
  • Revision id: 28085
  • Created:
  • Creator: myakura
  • Is current revision? No
  • Comment WebKit (and Chrome dev build) now supports the standard (unprefixed) box-shadow property; 23 words added

Revision Content

{{ CSSMozExtensionRef() }}{{ gecko_minversion_header("1.9.1") }}

Summary

The box-shadow CSS property accepts one or more shadow effects as a comma-separated list. It allows casting a drop shadow from the frame of almost any element. If a {{ cssxref("-moz-border-radius","border-radius") }} is specified on the element with a box shadow, the box shadow takes on the same rounded corners. The z-ordering of multiple box shadows is the same as multiple {{ cssxref("text-shadow", "text-shadows") }} (the first specified shadow is on top).

{{ gecko_callout_heading("2.0") }}

Prior to Gecko 2.0, this was called -moz-box-shadow.

  • {{ Xref_cssinitial() }}: {{ Cssxref("none") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified (any <length> made absolute; any <color> computed)

Syntax

box-shadow:  none | <shadow> [,<shadow>]*

  where <shadow> is defined as:

inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ]

Values

inset (optional)
If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content).
The presence of the inset keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). Inset shadows are drawn above background, but below border and content.
<offset-x> <offset-y> (required)
This are two {{ Xref_csslength() }} values to set the shadow offset. <offset-x> specifies the horizontal distance. Negative values place the shadow to the left of the element. <offset-y> specifies the vertical distance. Negative values place the shadow above the element. See {{ Xref_csslength() }} for possible units.
If both values are 0, the shadow is placed behind the element (and may generate a blur effect if <blur-radius> and/or <spread-radius> is set).
<blur-radius> (optional)
This is a third {{ Xref_csslength() }} value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be 0 (the shadow's edge is sharp).
<spread-radius> (optional)
This is a fourth {{ Xref_csslength() }} value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
<color> (optional)
See {{ Xref_csscolorvalue() }} values for possible keywords and notations.
If not specified, the color depends on the browser. In Gecko (Firefox), the value of the {{ cssxref("color") }} property is used. WebKit's shadow is transparent and therefore useless if <color> is omitted.

Live Examples

   -moz-box-shadow: 60px -16px teal;
-webkit-box-shadow: 60px -16px teal;
        box-shadow: 60px -16px teal;
   -moz-box-shadow: 10px 5px 5px black;
-webkit-box-shadow: 10px 5px 5px black;
        box-shadow: 10px 5px 5px black;
   -moz-box-shadow: 3px 3px red, -1em 0 0.4em olive;
-webkit-box-shadow: 3px 3px red, -1em 0 0.4em olive;
        box-shadow: 3px 3px red, -1em 0 0.4em olive;
   -moz-box-shadow: inset 5em 1em gold;
-webkit-box-shadow: inset 5em 1em gold;
        box-shadow: inset 5em 1em gold; 
   -moz-box-shadow: 0 0 1em gold;
-webkit-box-shadow: 0 0 1em gold;
        box-shadow: 0 0 1em gold; 
   -moz-box-shadow: inset 0 0 1em gold;
-webkit-box-shadow: inset 0 0 1em gold;
        box-shadow: inset 0 0 1em gold;

 

Browser compatibility

Browser Basic support Multiple shadows inset keyword Spread radius
Internet Explorer 9.0 (only in IE9 Standards Mode) box-shadow 9.0 9.0 9.0
5.5  supports Microsoft's DropShadow and Shadow Filter --- --- ---
Firefox (Gecko) 4.0 (2.0) box-shadow 4.0 (2.0) 4.0 (2.0) 4.0 (2.0)
3.5 (1.9.1) -moz-box-shadow 3.5 (1.9.1) 3.5 (1.9.1) 3.5 (1.9.1)
Opera 10.5 box-shadow 10.5 10.5 10.5
Safari | Chrome | WebKit --- | 10.0 | 534 box-shadow --- | 10.0 | 534 --- | 10.0 | 534 --- | 10.0 | 534
3.0 | 1.0 | 522 -webkit-box-shadow 4.0 | 1.0 | 528 5.0 | 4.0 | 533 5.0 | 4.0 | 533

Specifications

{{ HTML5ArticleTOC() }}

{{ languages( { "de": "de/CSS/box-shadow",  "fr": "fr/CSS/box-shadow" } ) }}

Revision Source

<p>{{ CSSMozExtensionRef() }}{{ gecko_minversion_header("1.9.1") }}</p>
<h3>Summary</h3>
<p>The<code> box-shadow </code>CSS property accepts one or more shadow effects as a comma-separated list. It allows casting a drop shadow from the frame of almost any element. If a {{ cssxref("-moz-border-radius","border-radius") }} is specified on the element with a box shadow, the box shadow takes on the same rounded corners. The z-ordering of multiple box shadows is the same as multiple {{ cssxref("text-shadow", "text-shadows") }} (the first specified shadow is on top).</p>
<div class="geckoVersionNote">
<p>{{ gecko_callout_heading("2.0") }}</p>
<p>Prior to Gecko 2.0, this was called <code>-moz-box-shadow</code>.</p>
</div>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified (any <code>&lt;length&gt;</code> made absolute; any <code>&lt;color&gt;</code> computed)</li>
</ul>
<h3>Syntax</h3>
<pre>box-shadow:  none | &lt;shadow&gt; [,&lt;shadow&gt;]*

  where &lt;shadow&gt; is defined as:

inset? &amp;&amp; [ &lt;offset-x&gt; &lt;offset-y&gt; &lt;blur-radius&gt;? &lt;spread-radius&gt;? &lt;color&gt;? ]</pre>
<h3>Values</h3>
<dl> <dt>inset <small>(optional)</small></dt> <dd>If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content).<br> The presence of the<code> inset </code>keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). Inset shadows are drawn above background, but below border and content.</dd> <dt>&lt;offset-x&gt; &lt;offset-y&gt; <small>(required)</small></dt> <dd>This are two {{ Xref_csslength() }} values to set the shadow offset. <code>&lt;offset-x&gt; </code>specifies the horizontal distance. Negative values place the shadow to the left of the element. <code>&lt;offset-y&gt; </code>specifies the vertical distance. Negative values place the shadow above the element. See {{ Xref_csslength() }} for possible units.<br> If both values are<code> 0</code>, the shadow is placed behind the element (and may generate a blur effect if <code>&lt;blur-radius&gt;</code> and/or <code>&lt;spread-radius&gt;</code><code> </code>is set).</dd> <dt>&lt;blur-radius&gt; <small>(optional)</small></dt> <dd>This is a third {{ Xref_csslength() }} value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be<code> 0 </code>(the shadow's edge is sharp).</dd> <dt>&lt;spread-radius&gt; <small>(optional)</small></dt> <dd>This is a fourth {{ Xref_csslength() }} value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be<code> 0 </code>(the shadow will be the same size as the element).</dd> <dt>&lt;color&gt; <small>(optional)</small></dt> <dd>See {{ Xref_csscolorvalue() }} values for possible keywords and notations.<br> If not specified, the color depends on the browser. In Gecko (Firefox), the value of the {{ cssxref("color") }} property is used. WebKit's shadow is transparent and therefore useless if <code>&lt;color&gt;</code> is omitted.</dd>
</dl>
<h3>Live Examples</h3>
<ul> <li><a class="external" href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html" title="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">box-shadow test</a></li> <li><a class="external" href="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/" title="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">box-shadow tutorial and examples</a></li>
</ul>
<pre style="-moz-box-shadow: 60px -16px teal; float: left; margin: 1em;">   -moz-box-shadow: 60px -16px teal;
-webkit-box-shadow: 60px -16px teal;
        box-shadow: 60px -16px teal;
</pre>
<pre style="-moz-box-shadow: 10px 5px 5px black; float: left; margin: 1em;">   -moz-box-shadow: 10px 5px 5px black;
-webkit-box-shadow: 10px 5px 5px black;
        box-shadow: 10px 5px 5px black;
</pre>
<pre style="-moz-box-shadow: 3px 3px red, -1em 0pt 0.4em olive; float: left; margin: 1em;">   -moz-box-shadow: 3px 3px red, -1em 0 0.4em olive;
-webkit-box-shadow: 3px 3px red, -1em 0 0.4em olive;
        box-shadow: 3px 3px red, -1em 0 0.4em olive;
</pre>
<pre style="-moz-box-shadow: 5em 1em gold inset; float: left; margin: 1em;">   -moz-box-shadow: inset 5em 1em gold;
-webkit-box-shadow: inset 5em 1em gold;
        box-shadow: inset 5em 1em gold; 
</pre>
<pre style="-moz-box-shadow: 0pt 0pt 1em gold; float: left; margin: 1em;">   -moz-box-shadow: 0 0 1em gold;
-webkit-box-shadow: 0 0 1em gold;
        box-shadow: 0 0 1em gold; 
</pre>
<pre style="-moz-box-shadow: 0pt 0pt 1em gold inset; float: left; margin: 1em;">   -moz-box-shadow: inset 0 0 1em gold;
-webkit-box-shadow: inset 0 0 1em gold;
        box-shadow: inset 0 0 1em gold;
</pre>
<p style="clear: both;"> </p>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th colspan="2">Basic support</th> <th>Multiple shadows</th> <th><code>inset </code>keyword</th> <th>Spread radius</th> </tr> <tr> <td rowspan="2">Internet Explorer</td> <td><strong>9.0</strong> (only in IE9 Standards Mode)</td> <td><code>box-shadow</code></td> <td>9.0</td> <td>9.0</td> <td>9.0</td> </tr> <tr> <td colspan="2">5.5  supports Microsoft's <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532985%28VS.85,loband%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms532985(VS.85,loband).aspx">DropShadow</a> and <a class="external" href="http://msdn.microsoft.com/en-us/library/ms533086%28VS.85,loband%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533086(VS.85,loband).aspx">Shadow</a> Filter</td> <td>---</td> <td>---</td> <td>---</td> </tr> <tr> <td rowspan="2">Firefox (Gecko)</td> <td><strong>4.0</strong> (2.0)</td> <td><code>box-shadow</code></td> <td>4.0 (2.0)</td> <td>4.0 (2.0)</td> <td>4.0 (2.0)</td> </tr> <tr> <td><strong>3.5</strong> (1.9.1)</td> <td><code>-moz-box-shadow</code></td> <td>3.5 (1.9.1)</td> <td>3.5 (1.9.1)</td> <td>3.5 (1.9.1)</td> </tr> <tr> <td>Opera</td> <td><strong>10.5</strong></td> <td><code>box-shadow</code></td> <td>10.5</td> <td>10.5</td> <td>10.5</td> </tr> <tr> <td rowspan="2">Safari | Chrome | WebKit</td> <td>--- | 10.0 | 534</td> <td><code>box-shadow</code></td> <td>--- | 10.0 | 534</td> <td>--- | 10.0 | 534</td> <td>--- | 10.0 | 534</td> </tr> <tr> <td>3.0 | 1.0 | 522</td> <td><code>-webkit-box-shadow</code></td> <td>4.0 | 1.0 | 528</td> <td>5.0 | 4.0 | 533</td> <td>5.0 | 4.0 | 533</td> </tr> </tbody>
</table><h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-box-shadow" title="http://www.w3.org/TR/css3-background/#the-box-shadow">CSS 3 Backgrounds and Borders</a> Last call working draft</li>
</ul>
<p>{{ HTML5ArticleTOC() }}</p>
<p>{{ languages( { "de": "de/CSS/box-shadow",  "fr": "fr/CSS/box-shadow" } ) }}</p>
Revert to this revision