CSS Text Shadow Generator
Design CSS text-shadow with a live preview and code.
The first layer paints on top.
2px 2px 4px rgba(0, 242, 254, 0.6)text-shadow: 2px 2px 4px rgba(0, 242, 254, 0.6);
Working with text-shadow
The CSS text-shadow property takes a horizontal offset, a vertical offset, an optional blur radius, and a color. Subtle shadows improve legibility over busy backgrounds, while larger offsets and blurs create glow or 3D effects.
It also takes a comma-separated list, and the editor above builds one — add up to eight layers, reorder them, and the first in the list paints on top. Stacking is what most text effects actually are: a hard offset repeated at increasing distances with falling opacity gives the classic long shadow, an outline is four tight shadows pushed one pixel in each direction, and a neon glow is a small bright shadow inside a large faint one. None of those are reachable with a single shadow.
Note that text-shadow takes three lengths, not four: unlike box-shadow it has no spread radius and no inset keyword, so the editor does not offer them — adding either would emit CSS the browser discards. The whole stack travels in the URL, so a copied link reproduces the exact effect. Everything is generated in your browser.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Adding a subtle shadow so text stays legible over an image.
- Building a layered shadow for a display heading.
- Comparing offsets and blurs against a live preview.
- Producing an outline effect using multiple shadows.
- Getting a shadow that matches a design specification.
Frequently Asked Questions
- What do the four values mean?
- Horizontal offset, vertical offset, blur radius and colour. Offsets may be negative to move the shadow up or left; blur must not be, and a blur of zero gives a hard-edged copy of the text.
- Can I stack several shadows?
- Yes — comma-separate them and they paint front to back, with the first on top. That is how outlines, layered neon and the classic offset 3D effect are built: several shadows at increasing offsets in darkening shades.
- How does text-shadow differ from box-shadow?
- It follows the glyph outlines rather than the element's box, and it has no spread value and no `inset` keyword. Applying `box-shadow` to text draws a rectangle behind the whole element instead.
- Does a shadow hurt readability?
- It can. Contrast is measured against the background, and a heavy shadow blurs the letterform edges that make text legible at small sizes. A subtle shadow to lift text off a photo is fine; a decorative one on body copy is not.
- Is there a performance cost?
- Blur is the expensive part, and several large-radius shadows on frequently repainted text can show up on low-end devices. A static heading is not a concern; animating the shadow on scroll is where it becomes one.
- Can I use it to outline text?
- Four zero-blur shadows at one-pixel offsets approximate an outline and work everywhere. `-webkit-text-stroke` gives a real stroke with better results where it is supported, and the shadow version is the reliable fallback.
Common errors and gotchas
- Relying on a shadow to fix contrast, which does not satisfy an accessibility ratio.
- Stacking many shadows, which is expensive to paint on long passages.
- Using a large blur on body text, which reduces legibility rather than helping it.
- Applying a shadow that disappears entirely on a dark background.
- Assuming the shadow scales with font size, which it does not.