What this builds
CSS text-shadow declarations with live preview on your sample text. Type the text you want to style, drag the sliders, copy the result.
The six presets cover most common cases:
- Subtle: 1px offset, low opacity, barely-visible depth
- Classic: standard 2-4px drop shadow
- Glow: zero offset, blur, brand-colored, for hover/focus accents
- Retro: hard-edged offset (no blur), 80s/90s sticker style
- Neon: zero offset, big blur, vivid color, sign/light effect
- Emboss: 1px white offset, gives text a raised feel on dark backgrounds
How text-shadow differs from box-shadow
- box-shadow wraps the rectangular box of an element; useful for cards, buttons, modals
- text-shadow applies to the text glyphs themselves; useful for logos, headings, decorative type
You can stack multiple text-shadows separated by commas, useful for complex effects like double-stroked text or glows with multiple bands. This generator does single shadows; for stacks, copy the output and concatenate.
Common patterns
A few text-shadow combinations show up everywhere:
/* Soft drop-shadow for headings on busy backgrounds */
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
/* Glow effect (hover state) */
text-shadow: 0 0 8px rgba(124,79,255,0.7);
/* Stacked outline (poor man's stroke) */
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
/* Neon */
text-shadow: 0 0 5px #fff, 0 0 10px #00ffc6, 0 0 20px #00ffc6;For real text strokes, -webkit-text-stroke is more reliable but has narrower browser support.
Performance considerations
Text shadow is GPU-accelerated in modern browsers and rarely a performance concern. Even animated shadows on text elements run smoothly. The exception: very large blur radii (50+) on lots of text simultaneously can drop framerate on low-end mobile.
Frequently asked questions
Why does my shadow look fuzzy on Retina displays? Browsers render shadows at the pixel grid; on high-DPI displays, sub-pixel offsets can look blurry. Try whole-pixel offsets (1px instead of 1.5px) for crisp shadows.
Can I animate text-shadow? Yes, CSS animations and transitions handle text-shadow. Common patterns: fade-in shadows on hover, pulsing neon effects.
What’s a “stroke” and can text-shadow do it?
A stroke is an outline around each character. text-shadow can fake a stroke by stacking 4 hard-edged shadows in cardinal directions (see “stacked outline” pattern above). For real strokes, use -webkit-text-stroke (Safari, Chrome, Firefox) or SVG.
Browser compat? text-shadow works in IE10+ and every modern browser. Multiple comma-separated shadows are universal.