mozilla

Revision 24960 of text-shadow

  • Revision slug: CSS/text-shadow
  • Revision title: text-shadow
  • Revision id: 24960
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment new example; syntax; 110 words added, 28 words removed

Revision Content

{{ CSSRef() }}{{ gecko_minversion_header("1.9.1") }}

Summary

The text-shadow CSS property accepts a comma-separated list of shadow effects to be applied to the text and {{ cssxref("text-decoration","text-decorations") }} of the element.

Multiple shadow effects are applied front-to-back: the first shadow is on top.

  • {{ Xref_cssinitial() }}: {{ Cssxref("none") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: yes
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: a color and three lengths

Syntax

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

  where <shadow> is:

[ <color>? <offset-x> <offset-y> <blur-radius>? | <offset-x> <offset-y> <blur-radius>? <color>? ]

Values

<color>
Optional, allowed before or after the {{ Xref_csslength() }} values. If the {{ Xref_csscolorvalue() }} is not specified, a UA-chosen color will be used. Gecko/Firefox uses the value of the element's {{ cssxref("color") }} property. Other browsers may differ. {{ note("Specify a color for browser interoperability.") }}
<offset-x> <offset-y>
See {{ Xref_csslength() }} for possible units.
This <length> values set the shadow offset. <offset-x> specifies the horizontal distance. Negative values place the shadow to the left of the text. <offset-y> specifies the vertical distance. Negative values place the shadow above the text. If both values are 0, the shadow is placed behind the text (and may generate a blur effect <blur-radius> is set).
<blur-radius>
Optional. This is a {{ Xref_csslength() }} value. If not specified, it will be 0. The higher this value, the bigger the blur, so the shadow becomes wider and lighter.

Live Examples

text-shadow: orange 0 -2px;

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
color: white;
font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
             rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
             rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px; 
color: gold;
background: gold;

Specifications

text-shadow was improper defined in CSS2 and dropped in CSS2.1. The CSS3 Text spec improved the syntax.

Browser compatibility

Browser Lowest Version
Internet Explorer ---
5.5  supports Microsoft's Shadow and DropShadow Filter
Firefox (Gecko) 3.5 (1.9.1)
Opera 9.5
Safari (WebKit) 1.1 (100), multiple text-shadows since 4.0 (528)

At the time of this writing:

  • Opera 9.x supports a maximum of 6-9 text-shadows and adheres to the CSS2 painting order (the first specified shadow is on the bottom). For performance reasons, the blur radius is limited to 100px.
  • Gecko 1.9.1 (Firefox 3.5) theoretically supports infinite text-shadows (don't try it) and adheres to the CSS3 painting order (the first specified shadow is on top).
  • Safari 1.1-3.2 only supports one text-shadow (displays the first shadow of a comma-separated list and ignores the rest). Any shadows that do not explicitly specify a color are transparent. For Safari 4.0 and later, multiple text-shadows adhere to the CSS3 painting order.

See also

{{ cssxref("-moz-box-shadow") }}

{{ languages( { "fr": "fr/CSS/text-shadow" } ) }}

Revision Source

<p>{{ CSSRef() }}{{ gecko_minversion_header("1.9.1") }}</p>
<h3>Summary</h3>
<p>The<code> text-shadow </code>CSS property accepts a comma-separated list of shadow effects to be applied to the text and {{ cssxref("text-decoration","text-decorations") }} of the element.</p>
<p>Multiple shadow effects are applied front-to-back: the first shadow is on top.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: yes</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: a color and three lengths</li>
</ul>
<h3>Syntax</h3>
<pre>text-shadow: none | [&lt;shadow&gt;,]* &lt;shadow&gt;

  where &lt;shadow&gt; is:

[ &lt;color&gt;? &lt;offset-x&gt; &lt;offset-y&gt; &lt;blur-radius&gt;? | &lt;offset-x&gt; &lt;offset-y&gt; &lt;blur-radius&gt;? &lt;color&gt;? ]
</pre>
<h3>Values</h3>
<dl> <dt>&lt;color&gt;</dt> <dd>Optional, allowed before or after the {{ Xref_csslength() }} values. If the {{ Xref_csscolorvalue() }} is not specified, a UA-chosen color will be used. Gecko/Firefox uses the value of the element's {{ cssxref("color") }} property. Other browsers may differ. {{ note("Specify a color for browser interoperability.") }}</dd> <dt>&lt;offset-x&gt; &lt;offset-y&gt;</dt> <dd>See {{ Xref_csslength() }} for possible units.<br> This<code> &lt;length&gt; </code>values set the shadow offset.<code> &lt;offset-x&gt; </code>specifies the horizontal distance. Negative values place the shadow to the left of the text.<code> &lt;offset-y&gt; </code>specifies the vertical distance. Negative values place the shadow above the text. If both values are<code> 0</code>, the shadow is placed behind the text (and may generate a blur effect<code> &lt;blur-radius&gt; </code>is set).</dd> <dt>&lt;blur-radius&gt;</dt> <dd> Optional. This is a {{ Xref_csslength() }} value. If not specified, it will be<code> 0</code>. The higher this value, the bigger the blur, so the shadow becomes wider and lighter.</dd>
</dl>
<h3>Live Examples</h3>
<pre>text-shadow: orange 0 -2px;
</pre>
<p style="text-shadow:orange 0 -2px">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<pre>text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
color: white;
font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
</pre>
<p style="text-shadow:1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; color:white;  font:1.5em Georgia,'Bitstream Charter','URW Bookman L','Century Schoolbook L', serif">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, <u>totam rem aperiam</u>, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<pre style="text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px, rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px, rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px; color:gold; background:gold">text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
             rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
             rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px; 
color: gold;
background: gold;
</pre>
<h3>Specifications</h3>
<p><code>text-shadow </code>was improper defined in CSS2 and dropped in CSS2.1. The<em> CSS3 Text </em>spec improved the syntax.</p>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-text/#text-shadow">CSS 3 Text #text-shadow</a> Working draft, some changes are proposed.</li>
</ul>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td rowspan="2">Internet Explorer</td> <td>---</td> </tr> <tr> <td>5.5  supports Microsoft's <a class="external" href="http://msdn.microsoft.com/en-us/library/ms673539%28VS.85,loband%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms673539(VS.85,loband).aspx"><em>Shadow</em> and <em>DropShadow</em> Filter</a></td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>3.5</strong> (1.9.1)</td> </tr> <tr> <td>Opera</td> <td><strong>9.5</strong></td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.1 (100), multiple text-shadows since <strong>4.0</strong> (528)</td> </tr> </tbody>
</table>
<p>At the time of this writing:</p>
<ul> <li><strong>Opera 9.x</strong> supports a maximum of 6-9 text-shadows and adheres to the CSS2 painting order (the first specified shadow is on the <em>bottom</em>). For performance reasons, the blur radius is limited to 100px.</li> <li><strong>Gecko 1.9.1</strong> (Firefox 3.5) theoretically supports infinite text-shadows (don't try it) and adheres to the CSS3 painting order (the first specified shadow is on <em>top</em>).</li> <li><strong>Safari 1.1-3.2</strong> only supports one text-shadow (displays the first shadow of a comma-separated list and ignores the rest). Any shadows that do not explicitly specify a color are transparent. For Safari 4.0 and later, multiple text-shadows adhere to the CSS3 painting order.</li>
</ul>
<h3>See also</h3>
<p>{{ cssxref("-moz-box-shadow") }}</p>
<p>{{ languages( { "fr": "fr/CSS/text-shadow" } ) }}</p>
Revert to this revision