CSS Text Shadow Generator
Build a text-shadow with a live preview: single, soft, glow, outline, emboss or a stepped long shadow, each a layer recipe made for thin strokes.
Enable JavaScript to change the shadow; the CSS below is for the defaults.
Each one is a layer recipe. Outline uses four hard offsets; glow uses three blurs and no offset.
For an outline this sets the thickness; for a long shadow, its length.
Text strokes are thin, so a blur much past the font size erases them.
Weight changes everything: a shadow tuned on bold text disappears under a light one.
Shadows read differently on text
2px 2px 2.4px rgb(11 16 32 / 0.55), 3.2px 3.2px 10.8px rgb(11 16 32 / 0.3)
.your-heading {
text-shadow:
2px 2px 2.4px rgb(11 16 32 / 0.55),
3.2px 3.2px 10.8px rgb(11 16 32 / 0.3);
}Build a text shadow on real text, at the size and weight you will ship, and copy the layers.
How to use
- Pick a style. Each one is a recipe: soft is two layers, glow is three blurs with no offset, outline is four hard offsets, long steps one pixel at a time.
- Set the offset and blur. On thin text a blur larger than the font size swallows the strokes, which the preview shows immediately.
- Set the colour and opacity. A shadow at full opacity reads as a second copy of the text; between 40 and 60 percent is where most of them live.
- Match the preview to your design: the text, the size, the weight, and a dark background if that is where it goes.
- Copy the declaration. Each layer is on its own line, because six layers on one line is unreadable.
Example
.your-heading {
text-shadow:
2px 2px 2.4px rgb(11 16 32 / 0.55),
3.2px 3.2px 10.8px rgb(11 16 32 / 0.3);
}That is the soft style: a tight layer for definition and a wider, fainter one for depth. One layer at the same total blur looks muddy; two at different scales reads as light.
Pitfalls
- A box shadow tuned on a card looks wrong on text. Letters are thin, so the same blur that softens a panel erases a stroke.
- Weight changes the answer. A shadow that works under a 900 heading disappears under a 400 paragraph, and the preview weight is there so you find that out now.
text-shadowdoes not thicken text. An outline made of four offsets is as far as it goes; for a real stroke use-webkit-text-stroke, which Safari, Chrome and Firefox all support, or an SVG.- Shadows do not improve contrast reliably. A dark shadow behind light text helps on a busy photo, but the contrast ratio is still measured against the background colour.
- An emboss needs two colours, light and dark. The light layer here is white at 55 percent, which is why an emboss only reads on a mid-tone background.
- A long shadow has to step one pixel at a time or the diagonal breaks into dashes. That means forty layers at forty pixels, which is fine to paint but heavy to animate.
- Shadows repaint on every frame of an animation. Animate a transform on the element instead of animating the shadow.
- Print stylesheets usually want the shadow gone. It costs ink and adds nothing on paper.
Compatibility
text-shadow with multiple comma-separated layers is supported by every browser in use, unprefixed, since 2011. The space-separated rgb() with a slash alpha used here needs Chrome 65, Firefox 52 or Safari 12.1; for anything older, replace it with rgba() by hand, which is the same colour. The tool runs entirely in your browser.
Frequently asked questions
How do I outline text properly?
-webkit-text-stroke: 1px #000 in every current browser, with a four-layer text shadow as the fallback. The outline style here is that fallback.