Most CSS text effects that look complicated are made from one property. The neon sign on a landing page, the hard outline on a game title, the stacked orange lettering that looks like a 1970s record sleeve: each of those is a single text-shadow declaration with several comma-separated layers. The syntax is short. The hard part is picking offsets and blur values that read well, and remembering which layer paints on top.
This guide covers the text-shadow grammar, how layering works, the recipes behind the common effects with the exact values they use, and the mistakes that make shadowed text hard to read or slow to render. Every example can be rebuilt in the CSS text shadow generator, which shows the result live and writes the declaration for you.
TL;DR:
text-shadowtakes a comma-separated list of shadows, each written asoffset-x offset-y blur-radius color. The first shadow in the list paints on top. It has no spread value and noinsetkeyword, unlikebox-shadow. Glows are several zero-offset shadows with growing blur, outlines are four one-pixel hard shadows, and 3D text is a stack of hard shadows each one pixel further out. The Toolz text shadow generator builds these with sliders and eight presets, client-side, free, no signup.
What is the CSS text-shadow property?
The text-shadow property paints one or more shadows behind the glyphs of an element's text. It is defined in the W3C CSS Text Decoration Module Level 3, and its value is either none or a comma-separated list of shadows.
Each shadow has up to four parts:
| Part | Required | What it does | Allowed values |
|---|---|---|---|
| Horizontal offset | Yes | Moves the shadow right (positive) or left (negative) | Any length, e.g. 2px, -0.1em |
| Vertical offset | Yes | Moves the shadow down (positive) or up (negative) | Any length |
| Blur radius | No, defaults to 0 |
Softens the edge; larger means blurrier | Zero or a positive length. Negative is invalid |
| Color | No, defaults to currentColor |
Shadow color, including transparency | Any CSS color |
The color can go first or last. text-shadow: #000 1px 1px and text-shadow: 1px 1px #000 are the same shadow. If you leave the color out, the shadow takes the text's own color, which is rarely what you want for a drop shadow but handy for a quick glow in the text color.
A shadow never changes layout. It does not push neighboring elements away or grow the element's box, so a large blur can spill outside the box and get cut off by a parent with overflow: hidden.
How is text-shadow different from box-shadow?
text-shadow follows the shape of each letter, while box-shadow follows the rectangle of the element's border box. That is the practical difference, and it decides which one you reach for. The grammar differs as well.
| Feature | text-shadow |
box-shadow |
|---|---|---|
| Shape of the shadow | Each glyph outline | The element's box, including rounded corners |
| Spread radius | Not available | Yes, fourth length |
inset keyword |
Not available | Yes |
| Multiple layers | Yes, comma-separated | Yes, comma-separated |
| Paint order | First listed on top | First listed on top |
| Default color | currentColor |
currentColor |
| Typical use | Headings, logos, legibility over images | Cards, buttons, elevation |
The missing spread value is why text outlines need four shadows instead of one. With box-shadow you can write 0 0 0 2px black to grow a solid ring. With text there is no way to expand the glyph, so you fake it by offsetting copies in several directions. If you are styling the container rather than the words, the box shadow generator guide covers spread, inset and elevation layers.
How does layering multiple text shadows work?
A single declaration can hold as many shadows as you like, separated by commas, and the browser paints the first one closest to the viewer. The last shadow in the list sits at the back. The text itself always paints above all of them.
That ordering matters whenever layers overlap. Compare these two declarations:
/* Sharp dark layer on top of a soft glow */
text-shadow: 2px 2px 0 #000, 0 0 12px #ff0;
/* Soft glow painted over the sharp layer */
text-shadow: 0 0 12px #ff0, 2px 2px 0 #000;
In the first, the crisp black copy stays sharp and the yellow haze sits behind it. In the second, the yellow glow washes over the black copy and softens it. Same shadows, different look.
The generator follows the same rule. Layer 1 in the layer tabs is the first shadow in the output, so it paints on top. Adding a layer appends it to the end of the list, behind the others. To move a layer forward you delete it and re-create it, or edit the copied CSS by hand.
What values does the Toolz generator write?
The text shadow generator gives each layer five controls and writes a declaration in a fixed format. Knowing that format helps when you paste the result into a codebase with its own conventions.
| Control | Range | Step | Written as |
|---|---|---|---|
| Offset X | -50px to 50px | 1px | Npx |
| Offset Y | -50px to 50px | 1px | Npx |
| Blur | 0px to 100px | 1px | Npx, including 0px |
| Color | Color picker | - | 6-digit hex |
| Opacity | 0% to 100% | 1% | Added as two hex digits after the color |
The opacity is folded into the color as an 8-digit hex value, following the CSS Color Module Level 4 hex notation. The last two digits are the alpha channel on a 0 to 255 scale, so the tool multiplies the opacity by 255, rounds, and converts to hex.
Here is how that works out for a few opacities:
| Opacity slider | Times 255 | Rounded | Hex alpha | Example color |
|---|---|---|---|---|
| 100% | 255 | 255 | ff |
#000000ff |
| 90% | 229.5 | 230 | e6 |
#4466eee6 |
| 70% | 178.5 | 179 | b3 |
#4466eeb3 |
| 60% | 153 | 153 | 99 |
#00000099 |
| 35% | 89.25 | 89 | 59 |
#00000059 |
| 25% | 63.75 | 64 | 40 |
#00000040 |
Every current browser reads 8-digit hex. If you must support a very old browser, rewrite the color as rgba() after copying: #00000099 becomes rgba(0, 0, 0, 0.6).
The tool only accepts slider and picker input, so values are whole pixels. For a shadow measured in em, which scales with font size, copy the CSS and swap the units in your stylesheet. A 2px offset on 16px body text is 0.125em.
How do you create a neon glow text effect?
A neon glow is several shadows with zero offset, the same bright color and increasing blur. Each layer adds a wider, fainter halo, and together they look like light bleeding into the surrounding air.
The generator opens on its Neon Glow preset, which produces this:
text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;
Three layers, blur doubling each time (7, 14, 28), opacity stepping down from 100% to 90% to 70%. The tight 7px layer gives the letters a bright core, and the 28px layer spreads the color out. On a dark background with white text this reads as a lit tube. On a light background most of the effect disappears, which is why the preview has a Light bg / Dark bg toggle: check both before you ship a glow to a site with a theme switch.
To make the glow stronger, add a fourth layer at 56px blur or repeat the 7px layer twice. Repeating a layer stacks its opacity and makes the core more intense without widening it.
How do you outline text with text-shadow?
Place four hard shadows (blur 0) one pixel out on each diagonal. Their overlap traces the edge of every glyph.
The Outline preset writes:
text-shadow: -1px -1px 0px #000000ff, 1px -1px 0px #000000ff, -1px 1px 0px #000000ff, 1px 1px 0px #000000ff;
This works well at one pixel. At two or three pixels gaps start to show at the midpoints of curves and straight edges, because the four copies only cover the diagonals. For a thicker outline, add four more layers on the straight axes (0 -2px, 2px 0, 0 2px, -2px 0) so eight copies surround each letter.
There is a non-shadow alternative. -webkit-text-stroke draws a real stroke along the glyph path and is supported by current browsers despite its prefix. It is centered on the outline, so it eats into thin letters, and it is specified in the WHATWG Compatibility Standard rather than in a CSS module. For small, crisp outlines on display text, the four-shadow trick remains the most predictable option.
How do you make 3D or extruded text?
Stack several hard shadows in the same color, each offset one pixel further down and right. Each copy adds one pixel of depth, and the eye reads the pile as the side of a solid letter.
The Retro 3D preset:
text-shadow: 1px 1px 0px #e99537ff, 2px 2px 0px #e99537ff, 3px 3px 0px #e99537ff, 4px 4px 0px #00000040;
Three orange layers build a three-pixel extrusion, and a fourth black layer at 25% opacity sits one pixel further out as a contact shadow that grounds the letters. For a deeper extrusion, keep adding orange layers with offsets 4, 5, 6 and move the dark layer to the end. Twelve layers for a 12px extrusion is normal for a big hero heading.
The Long Shadow preset uses the same idea with gaps and fading opacity:
text-shadow: 1px 1px 0px #00000033, 3px 3px 0px #00000026, 6px 6px 0px #0000001a, 10px 10px 0px #0000000f;
The offsets grow (1, 3, 6, 10) while opacity drops (20%, 15%, 10%, 6%), so the shadow trails off diagonally instead of forming a solid block.
Which text-shadow recipe fits which effect?
Here are all eight presets in the generator, with the idea behind each so you can adapt them.
| Preset | Layers | Offsets | Blur | Idea |
|---|---|---|---|---|
| Soft | 1 | 0, 2px | 4px | Subtle drop shadow at 35% black, safe for most headings |
| Hard | 1 | 2px, 2px | 0 | Crisp offset copy at 60% black, a flat print look |
| Neon Glow | 3 | 0, 0 | 7, 14, 28px | Same color, growing blur, for light on dark |
| Retro 3D | 4 | 1 to 4px diagonal | 0 | Stepped hard copies plus a faint contact shadow |
| Outline | 4 | +/-1px diagonals | 0 | Four copies tracing the glyph edge |
| Emboss | 2 | -1px/-1px and 1px/1px | 0 | White highlight top-left, dark shade bottom-right |
| Fire | 3 | 0, -1 / -2 / -4px | 4, 10, 18px | Yellow to orange to red, rising upward |
| Long Shadow | 4 | 1, 3, 6, 10px diagonal | 0 | Growing gap, fading opacity |
Emboss is the one people misread. It pairs a light shadow up and to the left with a dark shadow down and to the right, which mimics light from the top-left hitting raised letters. Swap the two colors and the text looks pressed into the page instead, the classic letterpress effect. Both only work when the text color is close to the background color; on high-contrast text the highlights vanish.
Fire is the only preset with negative vertical offsets. Each layer moves further up and gets blurrier and redder, so the heat appears to rise off the letters.
Does text-shadow hurt readability or accessibility?
It can, and the risk grows with blur and offset. A shadow does not change the contrast ratio that WCAG measures, which is calculated between the text color and the background color. The WCAG 2.1 contrast minimum asks for 4.5:1 for normal text and 3:1 for large text, and a glow does not help you meet that on paper.
In practice, a thin dark shadow behind light text on a busy photo makes the letters easier to pick out, because it separates the glyph edges from the image. A heavy glow on small text does the opposite: the halo fills the counters of letters like "e" and "a" and the word turns to mush.
Some guidelines that hold up:
- Keep body text shadows subtle. Something like
0 1px 2px rgba(0, 0, 0, 0.3)is plenty. - Save multi-layer effects for large display text, roughly 32px and up.
- Check the effect on both light and dark backgrounds if your site has a theme toggle.
- Do not rely on the shadow to rescue low contrast. Fix the text color first.
- Test at the smallest size the heading reaches on a phone, where the shadow is proportionally largest.
What slows text-shadow down, and what are common mistakes?
Blur is the expensive part. Every blurred layer has to be rasterized and blurred on each repaint, and the cost scales with blur radius and the amount of text. The MDN reference for text-shadow covers the syntax. The performance side is simple to reason about: a three-layer glow on a single heading is cheap, and the same glow on every paragraph of a long article, repainted during scroll, is a common source of jank on low-powered phones.
Mistakes that show up again and again:
| Mistake | Symptom | Fix |
|---|---|---|
Writing a spread value like 0 0 4px 2px red |
The whole declaration is ignored | Remove the fourth length; text-shadow has no spread |
Adding inset |
Declaration ignored | Not supported on text; use a lighter emboss instead |
Negative blur, e.g. -2px |
Declaration ignored | Blur must be zero or positive |
| Missing commas between layers | Declaration ignored, nothing renders | Separate each shadow with a comma |
| Glow clipped at the edges | Halo cut in a straight line | Parent has overflow: hidden; add padding |
| Glow invisible | Nothing seems to happen | Light glow on light background; test on dark |
Vendor prefix -webkit-text-shadow |
Harmless but useless | Use plain text-shadow; it needs no prefix |
The first three are worth stressing. A single invalid part invalidates the whole declaration, not just that layer, so a typo in layer four of a twelve-layer 3D effect removes all twelve. The generator's output is always valid, which is one reason to build the stack there and paste it in.
When should you use a generator instead of writing text-shadow by hand?
A single soft shadow is quicker to type than to click. Anything with three or more layers is quicker to build visually, because you are judging a look, and a look is hard to judge from numbers. The generator is also useful for learning: pick a preset, change one layer, and watch which part of the effect moves.
The Toolz generator runs entirely in the browser. The preview, the layer list and the CSS are all computed on the page, nothing is uploaded, and it keeps working offline once loaded. It is free, no signup. Copy CSS is counted against a daily usage allowance, like other tools on the site; editing and previewing are not.
What it does not do: it has no em or rem units, no typed number fields, no drag-to-reorder for layers, and no custom font in the preview. For those, copy the declaration and adjust it in your own stylesheet or browser dev tools.
If the effect you want is a blurred or recolored element rather than a shadow, CSS filters such as drop-shadow() and blur() apply to whole elements, including images. Frosted panels behind text are a job for the glassmorphism generator, and soft extruded buttons belong to the neumorphism generator. The full set of visual CSS builders is on the CSS tools hub, and the CSS gradient generator guide pairs well with text effects when you want a gradient background behind a glowing title.
A worked example: a readable hero title over a photo
Say you have white 64px text over a bright beach photo and the letters keep disappearing into the sand. The goal is legibility first, style second.
Start in the text-shadow tool with the Soft preset: 0px 2px 4px #00000059. On a busy image that is too faint. Raise opacity to 60% and blur to 8px, which gives 0px 2px 8px #00000099. The edges separate from the background, but thin strokes still flicker.
Add a second layer with zero offset, 2px blur and 50% black: 0px 0px 2px #00000080. Because you added it second, it paints behind the first layer, but it hugs the glyph edge and gives every stroke a thin dark rim. The result:
.hero-title {
color: #fff;
font-size: 64px;
text-shadow: 0px 2px 8px #00000099, 0px 0px 2px #00000080;
}
Two layers, both cheap to render, and the title holds up on sand, sky and surf. On a phone where the heading drops to 36px, the same pixel values are proportionally heavier; converting to em keeps them in step (0 0.03em 0.125em at 64px).
