What's the syntax for a text-shadow value?

Each layer is `offset-x offset-y blur-radius color`, and multiple layers are comma-separated, painted first-to-last so the first layer listed sits on top. Unlike box-shadow, text-shadow has no spread value and no inset option.

How do I make a glow effect?

Set offset-x and offset-y to 0 and use a large blur radius with the color you want to glow — stacking two or three layers with increasing blur and decreasing opacity (like the Glow preset) gives a softer, more realistic glow than a single layer.

How do I make embossed or 3D text?

Emboss uses two shadows: a dark one offset up-left and a light one offset down-right, which tricks the eye into reading the text as carved into the surface. Retro 3D text stacks several same-color shadows offset diagonally by increasing amounts to fake a solid extruded side.

Does text-shadow affect layout or accessibility?

No — text-shadow is purely visual and doesn't change the text's box size, so it won't shift surrounding layout. Just make sure the base text color still has enough contrast against its background on its own, since a shadow shouldn't be relied on as the only way to make text readable.

Is this generated locally?

Yes — the preview and CSS are computed entirely with client-side JavaScript. Nothing is uploaded or stored.

CSS TEXT SHADOW GENERATOR

Layer up to 5 text shadows on live, editable preview text and copy the CSS.

Shadow layers

Layer 1

X: 1

Y: 1

Blur: 3

ColorOpacity40%

Presets

CSS

text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);

How to build a CSS text shadow

1
Type your own preview text directly into the preview box.
2
Drag the X, Y, and Blur sliders on a layer to shape the shadow, and pick its color and opacity.
3
Click + Add layer to stack up to 5 shadows for effects like glow, emboss, or retro 3D text.
4
Pick a preset for a quick starting point, then tweak it to taste.
5
Copy the generated text-shadow CSS and paste it into your stylesheet.

Questions

What's the syntax for a text-shadow value?: Each layer is `offset-x offset-y blur-radius color`, and multiple layers are comma-separated, painted first-to-last so the first layer listed sits on top. Unlike box-shadow, text-shadow has no spread value and no inset option.
How do I make a glow effect?: Set offset-x and offset-y to 0 and use a large blur radius with the color you want to glow — stacking two or three layers with increasing blur and decreasing opacity (like the Glow preset) gives a softer, more realistic glow than a single layer.
How do I make embossed or 3D text?: Emboss uses two shadows: a dark one offset up-left and a light one offset down-right, which tricks the eye into reading the text as carved into the surface. Retro 3D text stacks several same-color shadows offset diagonally by increasing amounts to fake a solid extruded side.
Does text-shadow affect layout or accessibility?: No — text-shadow is purely visual and doesn't change the text's box size, so it won't shift surrounding layout. Just make sure the base text color still has enough contrast against its background on its own, since a shadow shouldn't be relied on as the only way to make text readable.
Is this generated locally?: Yes — the preview and CSS are computed entirely with client-side JavaScript. Nothing is uploaded or stored.