CSS: Text Shadow Examples

Xah Lee, 2013-03-10

This page shows you how to do CSS3 text shadow.

here's a example of text shadow.

shadow 1

here's the HTML code:

<p>shadow 1</p>

here's the CSS code:

p {
text-shadow: 0.2ex 0.2ex red;
}

the CSS syntax is this: text-shadow: ‹x-offset› ‹y-offset› ‹color›;

the “ex” above is a CSS unit meaning the height of “x”.

Fuzzy Shadow

You can also specify fuzziness.

CSS syntax is this: text-shadow: ‹x-offset› ‹y-offset› ‹fuzziness› ‹color›;

Example

shadow 2

here's the CSS code:

p {
text-shadow: 0.2ex 0.2ex 0.2ex red;
}

Multiple Shadows

You can also specify several shadows.

Example

multi shadow

here's the CSS code:

p {
text-shadow:
 -.2ex -.2ex 0.2ex green,
 0.2ex 0.2ex 0.2ex red;
}

Example Glow Effect

CSS code.

div {
display:inline-block;
text-shadow: 0 0 0.3ex cyan;
font-size:4ex;
background-color:black;
text-align:center;
padding:1ex;
}

Example Outline Effect

CSS code.

div {
color:white;
text-shadow:
  0.1px   0.0px   1px black,
  0       0.1px   1px black,
 -0.1px   0.0px   1px black,
  0      -0.1px   1px black,
  0.1px   0.1px   1px black,
 -0.1px  -0.1px   1px black,
 -0.1px   0.1px   1px black,
  0.1px  -0.1px   1px black;
font-size:4ex;
}

Reference

http://www.w3.org/Style/Examples/007/text-shadow.en.html