CSS text-shadow

<!doctype html>
<title>Example</title>
<style>
h1 { 
  font-family: sans-serif;
  color: white;
  text-shadow: 
    1px 1px 8px black, 
    .5em -.5em 0 gold, 
    1em .4em 0 orange, 
    1.5em .4em 10vw orange, 
    0 0 10vw gold;
  font-size: 10vw;
  }
</style>
<h1>CSS Shadows</h1>

The CSS text-shadow property is used for applying shadow effects to text.

You can use text-shadow to apply drop-shadows, outer glows, and other shadow effects to text.

The text-shadow property accepts a list of values. Each item in the list can have either two, three, or four values.

The first two values are length values that define the shadow's horizontal offset and vertical offset respectively (these are required values). A third length value can be used define the shadow's blur radius (optional). And a color value can be used to define the shadow's color (optional).

You can apply multiple shadow effects within a single text-shadow declaration by separating each set of values with a comma. Multiple shadow effects are applied in the order specified and may thus overlay each other, but they will never overlay the text itself.

Text shadows are not clipped to the shadowed shape and may show through if the text is partially-transparent. Also, text shadows do not influence layout, and do not trigger scrolling or increase the size of the scrollable area.

Syntax

These values are explained below.

Possible Values

none: No shadow.
1st length: The first length value specifies the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.
2nd length: The second length value specifies the vertical offset of the shadow. A positive value offsets the shadow down, a negative one up.
3rd length: The third length value specifies the blur radius. Larger values result in a more blurred shadow. A value of 0 results in a sharp shadow. Negative values are not allowed.
color: This value specifies the color of the shadow. If this value is not specified, the shadow has the resulting color of the ink that it shadows.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial: Represents the value specified as the property's initial value.
inherit: Represents the computed value of the property on the element's parent.
unset: This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value: none
Applies To: All elements
Inherited?: Yes
Media: Visual
Animatable: Yes (see example)

Example Code

Official Specifications

The text-shadow property was introduced in CSS2, dropped from CSS2.1, then subsequently reintroduced in CSS3 (under the CSS Text Decoration Module Level 3).

CSS Text Decoration Module Level 3 (W3C Candidate Recommendation 1 August 2013)
CSS Level 2 (W3C Recommendation 12-May-1998)