text-shadow

  • Revision slug: CSS/text-shadow
  • Revision title: text-shadow
  • Revision id: 292595
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ Cssref() }}

Summary

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

Each shadow is specified as an offset from the text, along with optional color and blur radius values.

Multiple shadows are applied front-to-back, with the first-specified shadow 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. Can be specified either before or after the offset values. If the color is not specified, a UA-chosen color will be used. {{ note("If you want to ensure consistency across browsers, explicitly specify a color.") }}
<offset-x> <offset-y>
Required. These <length> values specify the shadow's offset from the text. <offset-x> specifies the horizontal distance; a negative value places the shadow to the left of the text. <offset-y> specifies the vertical distance; a negative value places the shadow above the text. If both values are 0, then the shadow is placed behind the text (and may generate a blur effect when <blur-radius> is set).
To find out what units you can use, see {{ Xref_csslength() }}.
<blur-radius>
Optional. This is a {{ Xref_csslength() }} value. If not specified, it defaults to 0. The higher this value, the bigger the blur; the shadow becomes wider and lighter.

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;

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.

Specifications

Specification Status Comment
{{ SpecName('CSS3 Text', '#text-shadow', 'text-shadow') }} {{ Spec2('CSS3 Text') }}  

The CSS property text-shadow was improperly defined in CSS2 and dropped in CSS2 (Level 1). The CSS Text Module Level 3 spec improved and precised the syntax.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2.0.158.0 {{ CompatGeckoDesktop("1.9.1") }} 10 9.5 1.1 (100)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
  • Gecko (Firefox) theoretically supports infinite text-shadows (don't try it).
    Gecko 2 and later cap the blur radius at 300 for performance reasons.
    If the <color> value is unspecified, then Gecko uses the value of the element's {{ cssxref("color") }} property.
  • Opera supports a maximum of 6-9 text-shadows for performance reasons. The blur radius is limited to 100px.
    Opera 9.5-10.1 adheres to the old, reverse painting order (CSS2, the first specified shadow is on the bottom).
  • Internet Explorer 5.5 supports Microsoft's Shadow and DropShadow Filter.
  • Safari: Any shadows that do not explicitly specify a color are transparent.
    Safari 1.1-3.2 only supports one text-shadow (displays the first shadow of a comma-separated list and ignores the rest).
    Safari 4.0 (WebKit 528) and later support multiple text-shadows.
  • Konqueror supports text-shadow starting with version 3.4.

See also

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

Revision Source

<p>{{ Cssref() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>text-shadow</code> CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and {{ cssxref("text-decoration","text-decorations") }} of the element.</p>
<p>Each shadow is specified as an offset from the text, along with optional color and blur radius values.</p>
<p>Multiple shadows are applied front-to-back, with the first-specified shadow on top.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}:</dfn> {{ Cssxref("none") }}</li>
  <li><dfn>Applies to:</dfn> all elements</li>
  <li><dfn>{{ Xref_cssinherited() }}:</dfn> yes</li>
  <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}:</dfn> a color and three lengths</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<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 id="Values">Values</h3>
<dl>
  <dt>
    &lt;color&gt;</dt>
  <dd>
    Optional. Can be specified either before or after the offset values. If the color is not specified, a UA-chosen color will be used. {{ note("If you want to ensure consistency across browsers, explicitly specify a color.") }}</dd>
  <dt>
    &lt;offset-x&gt; &lt;offset-y&gt;</dt>
  <dd>
    Required. These <code>&lt;length&gt;</code> values specify the shadow's offset from the text. <code>&lt;offset-x&gt;</code> specifies the horizontal distance; a negative value places the shadow to the left of the text. <code>&lt;offset-y&gt;</code> specifies the vertical distance; a negative value places the shadow above the text. If both values are <code>0</code>, then the shadow is placed behind the text (and may generate a blur effect when <code>&lt;blur-radius&gt;</code> is set).<br />
    To find out what units you can use, see {{ Xref_csslength() }}.</dd>
  <dt>
    &lt;blur-radius&gt;</dt>
  <dd>
    Optional. This is a {{ Xref_csslength() }} value. If not specified, it defaults to <code>0</code>. The higher this value, the bigger the blur; the shadow becomes wider and lighter.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre class="brush: css">
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>
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>
<p 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">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>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Text', '#text-shadow', 'text-shadow') }}</td>
      <td>{{ Spec2('CSS3 Text') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<p>The CSS property <code>text-shadow</code> was <a class="external" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props" title="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">improperly defined in CSS2</a> and dropped in CSS2 (Level 1). The<em> CSS Text Module Level 3 </em>spec improved and precised the syntax.</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>2.0.158.0</td>
        <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
        <td>10</td>
        <td>9.5</td>
        <td>1.1 (100)</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<ul>
  <li><strong>Gecko</strong> (Firefox) theoretically supports infinite text-shadows (don't try it).<br />
    <strong>Gecko 2</strong>&nbsp;and later cap the blur radius at 300 for performance reasons.<br />
    If the &lt;color&gt; value is unspecified, then <strong>Gecko</strong> uses the value of the element's {{ cssxref("color") }} property.</li>
  <li><strong>Opera</strong> supports a maximum of 6-9 text-shadows for performance reasons. The blur radius is limited to 100px.<br />
    <strong>Opera 9.5-10.1</strong> adheres to the old, reverse painting order (CSS2, the first specified shadow is on the <em>bottom</em>).</li>
  <li><strong>Internet Explorer 5.5</strong> supports Microsoft's <a class="external" href="http://msdn.microsoft.com/en-us/library/ms673539(loband).aspx" title="http://msdn.microsoft.com/en-us/library/ms673539(loband).aspx"><em>Shadow</em> and <em>DropShadow</em> Filter</a>.</li>
  <li><strong>Safari: </strong>Any shadows that do not explicitly specify a color are transparent.<br />
    <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).<br />
    <strong>Safari 4.0</strong> (WebKit 528) and later support multiple text-shadows.</li>
  <li><strong>Konqueror</strong> supports text-shadow starting with version 3.4.</li>
</ul>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ cssxref("box-shadow") }}</li>
</ul>
Revert to this revision