Text Shadow Generator
Create layered text shadows for neon glow, 3D extrude and retro effects. Live text preview with editable content. Copy the CSS free.
Shadow Layers
.headline {
color: #ffffff;
font-size: 72px;
font-weight: 800;
text-shadow: 2px 2px 6px rgba(124, 58, 237, 0.60);
}About the text shadow generator
text-shadow takes the same offset, blur and colour values as box-shadow but applies them to glyphs. Stacking several shadows is what produces the effects people actually want: a neon glow is two or three blurred copies in the same hue, and a 3D extrude is a series of hard-edged copies offset one pixel at a time.
Because the preview here uses your own text at your own size and weight, you can see whether an effect survives at the size you will actually ship it, which is where most copied snippets fall apart.
How to use it
- 1Type the text you will actually use, and set the real size and weight.
- 2Pick a preset: Neon, 3D Extrude and Retro each demonstrate a different layering technique.
- 3Adjust each layer's offset, blur, colour and opacity independently.
- 4Add layers for stronger glows or deeper extrudes.
- 5Copy the CSS.
Worth knowing
- For a neon glow, keep every layer the same hue and increase the blur on each one rather than changing colours.
- For a 3D extrude, use zero blur and step the offset by one pixel per layer, darkening slightly as you go.
- Heavy text shadows hurt readability at small sizes. Keep them for headings.
Questions
How do I create a text outline?
Use four hard shadows at one pixel in each direction, or use -webkit-text-stroke, which is now widely supported and gives a cleaner result for thicker outlines.
Why does my neon text look muddy?
Usually too many differing colours. Real neon is one hue with increasing blur. Keep every layer the same colour and only change the blur radius and opacity.
Does text-shadow affect performance?
Lightly. A few shadows on headings costs nothing. Applying multi-layer shadows to long body copy forces the browser to repaint far more area and can be noticeable while scrolling.