Text Shadow Generator

text-shadow draws a shadow behind the rendered glyphs of an element, taking offset-x offset-y blur color values. Unlikebox-shadow there is no spread and noinset — shadows always follow the letterforms exactly, which is what makes them look clean on curved and serif type.

Practical uses

• Readability over images: a 1–2px shadow in a high-contrast color keeps white-on-photo captions readable without a scrim.
• Neon glow: stack multiple shadows with the same offset (0 0) and increasing blur for a multi-layer glow, e.g.0 0 2px #fff, 0 0 8px #14b8a6, 0 0 20px #14b8a6.
• Retro/chunky 3D: chain small solid shadows at 1px increments in a darker shade to fake extruded text.
• Outline effect:four 1px shadows in cardinal directions create a cheap text outline in browsers that don't support -webkit-text-stroke.

Accessibility

Shadows can damage legibility if they're strong enough to compete with the glyph itself. Keep blur + offset below the stroke weight of the font, and verify contrast with our Contrast Checker against the effective background color behind the text.