CSS: Text Shadow

By Xah Lee. Date: . Last updated: .
css shadow
CSS text shadow effects


  1. text-shadow: x_offset y_offset color
  2. text-shadow: x_offset y_offset blur_radius color
  3. text-shadow: shadow_spec_1, shadow_spec_2, …

Simple Shadow


CSS syntax:

text-shadow: x_offset y_offset color

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

Fuzzy Shadow


text-shadow: x_offset y_offset blur_radius color

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;

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

CSS Effects

  1. CSS: Round Corners
  2. CSS: Box Shadow
  3. CSS: Text Shadow
  4. CSS: 2D Transform
  5. CSS: Image Rollover
  6. CSS: Background Image
  7. CSS: Transition
  8. CSS: Animation

Font Topic

  1. Meaning of Font Size and Em Height
  2. CSS: What font-size is xx-large, x-large, small?
  3. CSS: Font Weight, Bold
  4. Standard Web Fonts
  5. Google Webfont Tutorial
  6. CSS: Text Decoration: Underline, Overline, Line-Through
  7. CSS: Text Shadow
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS Basics
  4. JS in Depth
  5. JS Reference
  6. DOM
  7. SVG
  8. JS Misc