Why does layer order matter in a text shadow?

Because the first layer listed paints on top. A tight, strong layer above a wide, faint one gives a crisp edge with depth behind it; the same two layers in the opposite order bury the edge under the soft one. That is why the default stack starts with the definition layer and ends with the depth layer.

Why use colours with alpha in the layers?

So overlapping layers build up gradually instead of turning into a solid block. Two opaque shadows over the same letter look like two copies of the word, while partly transparent layers let the overlap read as a shadow falling away from the letters. The text colour field accepts the eight-digit hex form for exactly that.

Should the blur radius scale with the text size?

Yes. A blur of 8 pixels is a soft halo on a 16 pixel label and an invisible detail on a 72 pixel heading, so the same declaration reads differently at each size. Converting the offsets and the blur to values derived from the font size is how one effect survives a responsive scale.

Does a text shadow affect layout?

Not for the element itself: the shadow is painted outside the box and does not change its size, so nothing reflows. It can, however, overflow a container with overflow hidden, and it does contribute to the area the browser has to composite, which is the cost to watch on animated elements.

Can I combine a shadow with an outline?

Yes, and the two properties coexist: the stroke draws the letter's edge while the shadow layers sit behind it. The tool covers only the shadow half, so the outline is applied where the CSS is used. Keep the stroke's paint order in mind, since a stroke painted over the fill erodes the letterform.

Text Shadow Builder

Layers (2)

0px 2px 4px

Offset Xpx

Offset Ypx

Blurpx

Color

0px 6px 18px

Offset Xpx

Offset Ypx

Blurpx

Color

Layers2

Declaration length47 characters

Preview

Text

Font sizepx

Shadow play

Text colorBackground

CSS

.shadow-text {
  color: #111827;
  text-shadow:
    0px 2px 4px #0f172a,
    0px 6px 18px #0f172a55;
}

You Might Also Need

Shadow Text Generator

Generate shadowed text

Text Gradient Maker

Create CSS text gradients

Outlined Text Generator

Generate outlined text

3D Text Effect Preview

Preview 3D text effects

The text shadow builder stacks layers, because every convincing shadow is a stack rather than a single offset. Each layer carries its own offsets, blur radius and colour, and the declaration is written in the same order the CSS paints it.

What is Text Shadow Builder?

The text shadow builder assembles a text-shadow declaration from a list of layers, previews it on real text and exports the exact CSS. Layers rather than presets is the choice that matters: a single shadow can give definition or depth, and only a stack gives both.

Each layer carries four values and one of them is the reason the effect reads as depth.

Offset X and offset Y, each from minus 40 to 40 pixels, which place the layer relative to the letterform.
Blur radius from 0 to 60 pixels, where a hard edge and a soft halo are the two ends of the scale.
A colour, entered as a text field that accepts alpha — the same hex value with a two-digit alpha suffix keeps the layer from turning solid where layers overlap.
The layer order itself, since the first layer listed paints on top.

The order explains the standard recipe: a small offset with a tight blur and a strong colour goes first to sharpen the letter's edge against the background, and a larger offset with a wide blur and a partly transparent colour goes second to suggest the letter lifting off the surface. Reversed, the wide soft layer sits over the sharp one and the edge disappears. Alpha is the other half of the technique: two overlapping opaque layers produce a second copy of the text, while partly transparent layers accumulate into a gradient that reads as depth.

The panel also reports the declaration length, which is a rough proxy for how far the effect has travelled from a single value, and shows the layer count. Text, size from 16 to 96 pixels and weight are all adjustable, and the preview sits on a background colour you choose, since a shadow tuned on white can vanish on a dark surface. Two limitations are built into the model: values are absolute pixels, so a shadow tuned at 48 pixels becomes a disproportionate blur when the same class is applied at 16; and nothing reports the paint cost, which matters when a heavy stack sits on an element that animates.

Five things are deliberately left to the component the declaration lands in.

There is no stroked or outlined letter beneath the shadow, though the two properties coexist when both are applied to the same text.
There is no per-character variation, so a shadow that changes along a word is a drawing exercise rather than a declaration.
Nothing reports the paint cost, which matters most when a heavy stack sits on an element that animates or scrolls.
The preview renders a single line, so a stack that behaves well on one line is not tested for how it accumulates across a paragraph.
The colour input is a text field: a value the browser cannot parse is skipped silently and that layer simply stops contributing to the effect.

Treat the declaration as the mechanical part of the treatment, and make the surrounding decisions — size, weight, background and any outline — where the text actually lives.

How to use Text Shadow Builder

Start with the two default layers and read the preview, since they already demonstrate the sharp-plus-soft pairing most effects need.
Set the text, its size and the background colour before tuning the layers, because both change how much shadow the eye can read.
Adjust each layer's offsets and blur radius, adding an alpha value to the colour where layers overlap, and add or remove layers as the effect requires.
Copy the CSS and decide whether the values should become size-relative, since the declaration is written in fixed pixels.

When to use Text Shadow Builder vs related tools

Reach for it when a heading needs depth and a single offset looks flat, when an existing shadow has turned into an unreadable smear, or when several layers of a live effect have to be documented as one declaration. Layer order is the part worth remembering. For an edge rather than a shadow the outlined text generator draws a stroke, for an extrusion the 3D text effect preview stacks hard shadows, and for a glow the neon text previewer layers colour around a bright core.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.