CSS: Text Shadow

By Xah Lee. Date: 2013-03-10. Last updated: 2026-06-07.

Interactive Text Shadow Generator

Shadow Color:

Text Color:

Background Color:

Offsets x:

Offsets y:

Offset length:

Offset direction:

blur

font: Serif Sans-Serif Monospace

code:

text-shadow: xOffset yOffset color

text-shadow: xOffset yOffset blurRadius color

text-shadow: ShadowSpec1, ShadowSpec2 …

Moonlight

div {
 text-shadow: 3px 3px grey;
}

Moonlight

div {
 text-shadow: 3px 3px 3px grey;
}

Moonlight

div {
 text-shadow: -3px -3px 3px green, 3px 3px 3px red;
}

Moonlight

The trick is to specify no shadow offset, but with big value of fuzziness.

div {
 text-shadow: 0 0 0.1em cyan;
 background-color: black;
}