CSS Text Shadow

Syntax

text-shadow: h-shadow v-shadow blur color;

JavaScript syntax:

object.style.textShadow="2px 2px #ff0000"

Note: The text-shadow property attaches one or more shadows to text. The property is a comma-separated list of shadows, each specified by 2 or 3 length values and an optional color. Omitted lengths are 0.

VALUE

DESCRIPTION

h-shadow

Required. The position of the horizontal shadow. Negative values are allowed

v-shadow

Required. The position of the vertical shadow. Negative values are allowed

blur

Optional. The blur distance

color

Optional. The color of the shadow

Text shadows:

h3 {text-shadow: 0.1em 0.1em #333}

Fuzzy text shadow:

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

Readable white text:

h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Multiple shadows:

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006}

Emboss effect: Raised Emboss & Inset Emboss

h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #444}

Drawing letters as outlines:

h3 {text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black}

Neon glow:

h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F}