Why stack layers instead of using one shadow?

Because one layer can express either definition or depth but not both. A small blur with a stronger alpha sharpens the letter's edge against the background, while a large blur with a weaker alpha suggests the object lifting off the surface. Combined, the pair reads as a raised letter; alone, each reads as a flat effect.

Why do the shadow colours use alpha?

So that overlapping layers build up gradually instead of stacking into a solid block. A hard offset shadow in solid black over black text looks like a second copy of the word rather than a depth cue. With alpha, the overlap between the definition layer and the depth layer accumulates without any single layer turning opaque.

What does the blur-to-size ratio tell me?

Whether the shadow will still make sense when the type size changes. Offsets and blur radii are absolute pixels, so the same declaration on a smaller heading produces a proportionally larger shadow. The ratio is the largest blur divided by the type size, and above roughly a third the effect starts to read as fuzz rather than as depth.

How do I make a shadow scale with the text?

Derive the values from the type size rather than typing them as pixels: an em-based shadow can be expressed in the shadow's own units in newer CSS, or the values can be set from a custom property on the component. The panel states the rule directly, since the tool writes fixed pixels for clarity.

Which preset suits text over an image?

The long soft shadow, because its wide blur separates the letters from a busy background without a visible offset. On a flat surface a hard offset reads as a deliberate print effect, but over a photograph it competes with the image detail and tends to look like a rendering error.

Shadow Text Generator

Shadow layers

TextPreset

Sizepx

Text colour

Background

Layers1

Largest blur ÷ size0.083 — scales with type

Scale rulekeep offsets in px and derive them from font-size for responsive shadows

Layer 1

Xpx

Ypx

Blurpx

Colour

Preview

Depth

css output

.shadow-text {
  color: #111827;
  background: #ffffff;
  font-size: 4.5000rem;
  text-shadow: 0px 2px 6px rgba(0,0,0,0.25);
}

You Might Also Need

Text Shadow Builder

Design CSS text shadows

3D Text Effect Preview

Preview 3D text effects

Neon Text Previewer

Preview neon glow text

Outlined Text Generator

Generate outlined text

The shadow text generator builds a shadow from stacked layers, because every convincing text shadow is a stack rather than a single offset. A small hard layer gives definition and a larger soft one gives depth, and each layer carries its own alpha so overlaps never go solid.

What is Shadow Text Generator?

The shadow text generator takes a string, a size, two colours and a list of text shadow layers, then renders the result and exports the shadow declaration.

Five shadow preset options cover the common cases: a soft lift below the type, a hard offset for a printed feel, a long soft shadow for depth, an emboss pair with a light layer above and a dark layer below, and a neon haze of two accent layers at different blurs.
Each layer carries an offset in x and y from minus 40 to 40 pixels, a blur radius from 0 to 60 pixels, and a colour chosen from a list of alpha values including black at 90, 55, 25 and 12 percent, white at 75 percent and two accent values.
Layers can be added and removed, so a three-layer effect can be built from a two-layer preset.
The largest blur radius is reported as a ratio of the type size, with a warning above 0.3 that the effect is very soft and may look fuzzy.
The CSS writes the size in rem and the shadow as a comma-separated list, which is how the layers survive the copy.

The alpha values are why the stack works. A shadow in solid black over solid black does not read as depth; it reads as a second copy of the text. Using a partly transparent colour means the overlap between layers accumulates gradually, and a light layer placed above a dark one produces the embossed edge that neither layer gives alone. The blur-to-size ratio is the other rule the panel states: offsets and blurs in pixels do not scale with the type, so a shadow tuned on a 72px heading becomes a blur when the same class is applied to a 20px label. Keeping the ratio under about a third of the type size is a working threshold, and deriving the pixel values from the font size is the responsive answer when the same treatment has to work at several sizes.

The layer colours are a fixed list, so an arbitrary shadow colour has to be edited into the CSS after copying.
Offsets are absolute pixels, so the shadow does not scale automatically with the type size, which is the reason for the ratio warning rather than a fix.
The preview renders a single line, so a shadow that behaves well on one line is not tested for how it stacks over several.
There is no support for a stroked or outlined letter underneath the shadow, though the two treatments can be combined by hand.
Nothing reports the paint cost, which matters when a heavily layered shadow sits on an element that animates.

Use it when a heading needs depth or lift and a single offset looks flat, and again when a shadow has to be diagnosed: three layers with descending alpha is almost always the answer, whatever the effect is called. Where the letter wants an edge rather than a shadow, the outlined text generator draws a stroke, the 3D text effect preview stacks hard shadows into an extrusion, and the neon text previewer layers glow around a light core. The shadow presets are also the quickest reference for the difference between definition and depth, and the neon text previewer shows the same layer technique applied to glow.

How to use Shadow Text Generator

Start from the preset closest to the effect you have in mind, then read the note under the preview to see how many layers it uses.
Set the size and the text and background colours before adjusting layers, since both change how much shadow the eye can read.
Adjust each layer's offsets and blur, keeping the largest blur under about a third of the type size, and add or remove layers as needed.
Copy the CSS and check the value of the blur ratio readout, converting the offsets to size-relative units if the treatment will be reused at other sizes.

When to use Shadow Text Generator vs related tools

Reach for it when a heading needs lift or depth and a single offset shadow looks flat, when a shadow has to work on both a light and a dark surface, or when an existing shadow has to be made to scale with the type rather than staying fixed. The layer model is the useful idea, not the presets. 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 lit tube, the neon text previewer layers glow 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.