How to use the text shadow generator
- Pick a preset: soft, hard, outline, long, neon or letterpress.
- Select a layer to adjust its offset, blur, color and opacity, or add more layers.
- Type your own text and set its size and colors.
- Copy the text-shadow line.
Layering text shadows
text-shadow takes a comma-separated list, drawn from the first (on top) to the last. An outline is four hard shadows offset in each diagonal; a long shadow is many hard shadows each one pixel further; a neon glow is the same color at increasing blur.
Shadows do not count towards contrast in WCAG, so make sure the text color alone passes against its background. Check it in the contrast checker.
Questions
Can text-shadow have a spread value?
No. Unlike box-shadow, text-shadow only takes x offset, y offset, blur and color. Use several layers to thicken it.
How do I make outlined text?
Use the Outline preset, or -webkit-text-stroke for a true stroke. Shadows give a softer, more compatible outline.