text-shadow looks deceptively similar to box-shadow but supports far fewer values and behaves differently on text than a box shadow does on an element's edges, since it follows the exact glyph outlines rather than a rectangular boundary. Getting a shadow, an outline effect or a soft glow to look right by guessing pixel values is slow, which is exactly the friction a live preview removes.
Everything renders in your browser. The offsets, the blur and the colour you choose never leave your device, they are combined into a CSS string by a short JavaScript function and applied directly to the preview element.
How this css text shadow generator builds the shadow value
text-shadow accepts exactly three length values and a colour: horizontal offset, vertical offset, blur radius, then the shadow colour, in that fixed order. This generator exposes each of those four inputs as its own slider or colour field, and joins them into a single, correctly ordered declaration the moment any value changes.
Because the preview element is styled with that same generated string rather than a separate rendering path, what you see updating live is guaranteed to match what the copied CSS produces once pasted into a real stylesheet.
When text-shadow improves readability instead of hurting it
A soft, dark shadow behind light coloured text sitting on a busy photograph is one of the most common and effective uses of text-shadow, since it adds just enough separation between the text and a background of varying brightness to keep every word legible. Used well, the effect should be almost invisible, noticed only as improved legibility rather than as an obvious decorative flourish.
- Light text over a photograph or video background, where contrast against the image cannot be guaranteed.
- Hero headings that need to stay legible regardless of what scrolls or changes behind them.
- A subtle depth cue on large display type, using a barely visible, low opacity shadow.
- A stylised glow effect for a logotype or a game style heads up display.
- Avoid heavy shadows on small body text, where the effect blurs letterforms instead of aiding legibility.
Why text-shadow only takes one blur, unlike box-shadow's spread
box-shadow supports five components, including a spread radius that grows or shrinks a shadow independently of blur. text-shadow drops spread entirely and supports only offset x, offset y, blur radius and colour, because the specification treats a text shadow as a copy of the text itself, blurred and offset, rather than as a shape with its own independently resizable outline.
That difference matters most when translating a box shadow design onto text: there is no spread value to fall back on, so achieving a bigger, bolder looking text shadow has to come from increasing blur and offset together rather than reaching for a spread control that simply does not exist for this property.
Choosing offset, blur and colour values
Small offsets, one to three pixels in each direction, paired with a moderate blur produce a subtle depth effect suited to headings and body text alike. Larger offsets combined with little or no blur produce a hard, cartoon style drop shadow, often used for bold display type. Zero offset with a generous blur instead produces a symmetric glow surrounding the text rather than a shadow cast in one direction.
For colour, a shadow at 100 percent opacity black is rarely correct, since real shadows are softer than that. Lowering the alpha channel to somewhere between 30 and 60 percent, or picking a dark tint of the background colour instead of pure black, produces a shadow that reads as intentional rather than heavy handed.
This css text shadow generator holds four values in one fixed order
Each of the four values, offset x, offset y, blur radius and colour, is held in component state and joined into a single text-shadow declaration in the exact order the specification requires. The colour input includes an alpha channel, converted to an rgba string so shadow opacity can be tuned independently of the shadow's hue.
Because the preview element receives that identical string as an inline style, there is no drift between what renders on screen and what gets copied, matching the same pattern used across every generator on this site.
Stacking multiple text shadows for a glow or outline effect
Like box-shadow, text-shadow accepts a comma separated list of shadow layers applied to the same text simultaneously. A common technique for a faux outline around light text uses four shadows offset by one pixel in each direction with zero blur, which approximates a stroke around each letterform since CSS has no native text stroke property with wide, reliable support.
A neon or glow effect stacks two or three shadows at zero offset with increasing blur radius and the same bright colour, producing light that appears to radiate outward from the letterforms rather than a shadow cast to one side.
| Property | text-shadow | box-shadow |
|---|---|---|
| Values | Offset x, offset y, blur, colour | Offset x, offset y, blur, spread, colour |
| Spread radius | Not supported | Supported |
| Inset keyword | Not supported | Supported |
| Follows | Glyph outlines | The element's box |
| Multiple layers | Comma separated, supported | Comma separated, supported |
How to build a CSS text shadow
- 1
Set the horizontal and vertical offset
Position the shadow relative to the text using the x and y sliders.
- 2
Adjust the blur radius
Increase blur for a soft glow, or keep it low for a sharp, hard edged shadow.
- 3
Pick a shadow colour
Choose a colour and opacity, favouring a soft, partially transparent shadow over solid black.
- 4
Copy the generated CSS
Copy the finished text-shadow declaration and paste it directly into your stylesheet.
Related tools worth bookmarking
Sources and further reading
Frequently asked questions
Common questions about the css text shadow generator.
Exactly three lengths and a colour: horizontal offset, vertical offset, blur radius, then the shadow colour, in that order. Unlike box-shadow, text shadow css has no spread radius and no inset keyword, since the effect always renders as a blurred, offset copy of the text itself.
Yes. This text shadow generator online runs entirely as a web page, there is nothing to install and no account to create. Every value you set is processed by JavaScript already loaded in your browser tab, with the finished CSS ready to copy the moment you are happy with the preview.
Set both the horizontal and vertical offset to zero and increase the blur radius, which spreads the shadow evenly in every direction around each letterform rather than casting it toward one side. Layering two or three shadows built this way at increasing blur values produces a stronger css text glow effect than a single layer alone.
This usually means the blur radius is too low relative to the offset, producing a shadow copy that sits mostly unblurred behind the text. Raising blur while keeping offset modest softens the edge considerably, and lowering the shadow's opacity at the same time keeps the effect from looking artificially dark.
No, text-shadow is purely visual and never changes an element's box size or surrounding layout. It can affect readability, however, so a shadow strong enough to reduce legibility against its background works against accessibility even though it does not trigger a technical accessibility violation on its own.
text-shadow follows the exact shape of each glyph, which is why it is the right choice for styling type. filter: drop-shadow() instead follows an element's rendered alpha shape, including images and SVG, and can be applied to a whole element rather than only its text, but text shadow blur and offset values remain the more predictable, better supported choice specifically for typography.