CSS Text Shadow Generator
Set the offsets, blur, colour and opacity of a text shadow and watch the preview update as you type. Use up to three layers for a glow, a lifted heading or a retro outline, then copy the text-shadow declaration.
The syntax follows the text-shadow property in the W3C CSS Text Decoration Module Level 3. Everything runs in your browser; nothing is sent to a server.
Shadow preview
text-shadow: 2px 2px 4px rgb(0 0 0 / 0.3);How to use it
- Pick a layer tab, or add a layer for a second or third shadow.
- Set the horizontal and vertical offsets in pixels.
- Raise the blur for a softer shadow, and choose a colour with its opacity.
- Copy the generated text-shadow declaration and paste it on any text selector.
About the CSS behind it
text-shadow takes a comma-separated list of shadows. Each shadow is a colour (optional, but written last here) followed by two required lengths for the offsets and an optional blur length. The property is defined in the W3C CSS Text Decoration Module Level 3. The first shadow in the list is painted on top.
Blur is the distance over which the shadow edge fades. A blur of zero gives a hard-edged copy of the glyphs, and larger values give a softer halo. Because text-shadow has no spread parameter, you cannot grow a shadow beyond the glyph shapes the way box-shadow grows a box. For an outline-style effect, stack shadows at 1px offsets in several directions.
Text shadows are drawn for every glyph, so a heavy blur on a long paragraph costs more paint time than on a heading. Use them on display text and short labels. For body copy, a plain colour change reads better and keeps the contrast high.
Frequently asked questions
- What do the three lengths in text-shadow mean?
- They are the horizontal offset, the vertical offset and the blur radius, in that order. A positive x moves the shadow right, a positive y moves it down, and a larger blur softens the edge. Unlike box-shadow, text-shadow has no spread value.
- Can I make an inner text shadow or an outline with text-shadow?
- Not with a single declaration. text-shadow has no inset keyword. For an outline, stack four shadows at offsets of 1px in each direction, or use -webkit-text-stroke. For a sunken look, use a dark shadow above the text and a light one below it.
- How do I make a glow effect?
- Use zero offsets, a large blur and the text colour or an accent colour with a low alpha. Two or three stacked glows with increasing blur produce a smoother falloff than one.
- Does a text shadow hurt readability?
- It can. A shadow that is too strong or too blurred reduces contrast between the glyphs and the background. Keep shadows subtle, and check the text against WCAG contrast guidance for the final colours.
Related tools and components
- Box Shadow GeneratorThe same idea for elements, with spread and inset
- CSS Text Gradient GeneratorGradient fills for headings
- Glassmorphism GeneratorFrosted panels for text on images
- Alert componentBanners that carry short messages
- Badge componentLabels that can use a subtle shadow
- CSS to Tailwind ConverterTurn the CSS into Tailwind classes