text-shadow

  • Revision slug: CSS/text-shadow
  • Revision title: text-shadow
  • Revision id: 24954
  • Created:
  • Creator: Mvent2
  • Is current revision? No
  • Comment 38 words added; page display name reset to default

Revision Content

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

Summary

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

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

Syntax

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

  where <shadow> is:

[ <color> <length> <length> <length>? | <length> <length> <length>? <color>? ]

Values

<color>
Optional, 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.") }}
<length> <length>
See {{ Xref_csslength() }} for possible units.
This <length> values set the shadow offset. The first <length> specifies the horizontal distance. Negative values place the shadow to the left of the text. The second <length> 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 if the third <length> is set).
<length>
Optional. The third {{ Xref_csslength() }} specifies the blur radius. If not specified, this will be 0. The higher this value, the bigger the blur, so the shadow becomes wider and lighter.

Examples

{{ CSSRefExampleLink|text-shadow }} Example 1 Example 2 from Bugzilla

  h1 { text-shadow: black 0 0 0.4em; }
  h2 { text-shadow: red 2px 2px 2px, blue 4px 4px 2px, 6px 6px, green 8px 8px; }

Specifications

Note: 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 N/A
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 shadows and adheres to the CSS2 painting order (the first specified shadow is on the bottom).
  • Safari before 4.0 only supports one shadow. When given a comma-separated list it will display the first shadow and ignore the rest. Any shadows that do not explicitly specify a color are ignored.
  • Gecko 1.9.1 (Firefox 3.5) theoretically supports infinite shadows (don't try it) and adheres to the CSS3 painting order (the first specified shadow is on top).

See also

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

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

Revision Source

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

  where &lt;shadow&gt; is:

[ &lt;color&gt; &lt;length&gt; &lt;length&gt; &lt;length&gt;? | &lt;length&gt; &lt;length&gt; &lt;length&gt;? &lt;color&gt;? ]</pre>
<h3 name="Values">Values</h3>
<dl> <dt>&lt;color&gt;</dt> <dd>Optional, 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>
</dl>
<dl> <dt>&lt;length&gt; &lt;length&gt;</dt> <dd> See {{ Xref_csslength() }} for possible units.<br> This<code> &lt;length&gt; </code>values set the shadow offset. The first<code> &lt;length&gt; </code>specifies the horizontal distance. Negative values place the shadow to the left of the text. The second<code> &lt;length&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 if the third<code> &lt;length&gt; </code>is set).</dd>
</dl>
<dl> <dt>&lt;length&gt;</dt> <dd> Optional. The third {{ Xref_csslength() }} specifies the<em> blur radius</em>. If not specified, this will be<code> 0</code>. The higher this value, the bigger the blur, so the shadow becomes wider and lighter. </dd>
</dl>
<h3 name="Examples">Examples</h3>
<p><span class="comment">{{ CSSRefExampleLink|text-shadow }}</span> <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273985">Example 1</a> <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=197360">Example 2</a> from Bugzilla</p>
<pre>  h1 { text-shadow: black 0 0 0.4em; }
</pre>
<pre>  h2 { text-shadow: red 2px 2px 2px, blue 4px 4px 2px, 6px 6px, green 8px 8px; }
</pre>
<h3 name="Specifications">Specifications</h3>
<p>Note: <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 name="Browser_compatibility">Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>N/A<br> 5.5  supports Microsoft's <a class="external" href="http://msdn.microsoft.com/en-us/library/ms673539(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms673539(VS.85).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><strong>1.1</strong> (100), multiple text-shadows since 4.0 (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 shadows and adheres to the CSS2 painting order (the first specified shadow is on the <em>bottom</em>).</li> <li><strong>Safari before 4.0</strong> only supports one shadow. When given a comma-separated list it will display the first shadow and ignore the rest. Any shadows that do not explicitly specify a color are ignored.</li> <li><strong>Gecko 1.9.1</strong> (Firefox 3.5) theoretically supports infinite shadows (don't try it) and adheres to the CSS3 painting order (the first specified shadow is on <em>top</em>).</li>
</ul>
<h3 name="See_also">See also</h3>
<p>{{ cssxref("-moz-box-shadow") }}</p>
<p>{{ languages( { "fr": "fr/CSS/text-shadow" } ) }}</p>
Revert to this revision