CSS: Text Shadow

Interactive Text Shadow Generator

blur

Shadow Color: Random

Text Color: Random

font: Serif Sans-Serif Monospace

font size

CSS Text Shadow

Syntax

1. text-shadow: xOffset yOffset color
2. text-shadow: xOffset yOffset blurRadius color
3. 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 .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.

div {
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 black;
padding: 0.5rem;
border-radius: 1rem;
}