CSS: Text Shadow

Interactive Text Shadow Generator

Syntax

text-shadow: xOffset yOffset color

text-shadow: xOffset yOffset blurRadius color

text-shadow: ShadowSpec1, ShadowSpec2 …

Simple Shadow

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

Fuzzy Shadow

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

Multiple Shadows

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

Glow Effect

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;
}

Outline Effect

The trick for outline font is to specify shadow for all 8 directions {top, bottom, left, right, top right, top left, bottom right, bottom left} with minimal offset, and with big value of blur radius.

#outline90653 {
 display: inline-block;
 color: white;
 background-color: white;
 text-shadow: 1px 0px 1px black, 1px 1px black, -1px 0px 1px black, -1px 1px black, 1px 1px 1px black, -1px -1px 1px black, -1px 1px 1px black, 1px -1px 1px black;
 font-size: 2rem;
 border: solid thin grey;
 padding: 8px;
 border-radius: 1rem;
}