CSS Text Shadow Generator
What text-shadow does
The text-shadow property paints one or more shadows behind the glyphs of an element's text. It takes no spread value, which is the one difference from box-shadow worth remembering, and layering several shadows is how glows, letterpress and long shadows are built.
Syntax
text-shadow: <offset-x> <offset-y> <blur> <color>;| Part | What it controls |
|---|---|
| offset-x / offset-y | How far the shadow moves right and down. Negative values move it the other way. |
| blur | Softness of the shadow. Omit it and the shadow is a hard copy of the glyph outline. |
| color | Any CSS colour. Put it first or last; both are valid, though last is the common convention. |
| no spread | Unlike box-shadow, text-shadow has no spread value. A thicker outline needs multiple offset shadows or -webkit-text-stroke. |
| comma-separated | Several shadows paint front to back, the first on top. This is how a neon glow stacks a tight bright layer over wider soft ones. |
Notes from practice
Letterpress is one light and one dark shadow
A 1px white shadow below and a 1px dark shadow above, both at low alpha, reads as text pressed into the surface. It only works on a mid-tone background — on pure white or black one of the two disappears.
Neon needs three or four layers in the same hue
Start with a tight, almost white shadow at 0 offset, then widen the blur and deepen the saturation on each following layer. A single big coloured blur reads as a smudge.
Long shadows are many 1px steps
A long diagonal shadow is dozens of hard shadows each one pixel further along. It is heavy to paint, so keep it off body copy and large headings that animate.
CSS Text Shadow Generator FAQ
How do I create a neon glow text effect in CSS?
Layer several text-shadows in the same hue with no offset and increasing blur: text-shadow: 0 0 4px #fff, 0 0 12px #0ff, 0 0 28px #0ff. The tight near-white layer gives the filament and the wider coloured ones give the halo.
What is the difference between text-shadow and box-shadow?
text-shadow follows the outline of the glyphs; box-shadow follows the element's rectangular border box. text-shadow also has no spread value and no inset keyword, so it takes offset, blur and colour only.
How do I make text readable over a photo?
A soft dark shadow with no offset lifts text off a busy image: text-shadow: 0 2px 6px rgb(0 0 0 / 0.6). It is lighter than a full overlay and keeps the image visible, though a semi-transparent scrim is more reliable when the photo is very light.
Can text-shadow have a spread like box-shadow?
No. The syntax is offset-x, offset-y, blur and colour only. To thicken an outline, stack shadows at several offsets around the glyph, or use -webkit-text-stroke, which the Typography generator covers.
Is text-shadow bad for performance?
A shadow or two costs nothing. Long-shadow effects built from dozens of stacked shadows are expensive to paint and should be kept off large headings, animated text and body copy.
Related generators
- Typography — Size, spacing, decoration, text-wrap and text-stroke for any text block.
- Gradient Text — Fill letters with a gradient using background-clip: text, with an optional shimmer animation.
- Box Shadow — Stack up to three shadow layers, mix inset and outer shadows, and tune colour and opacity.
- Variable Fonts — Drive weight, width and optical size from one font file. The preview uses Bricolage Grotesque.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.