CSS Text Shadow Generator

Design CSS text-shadow effects with multiple layers. Set X/Y offset, blur, colour and opacity for each layer, add, reorder and delete layers, change the preview text, colour, size and background, and copy or download the CSS.

Developer Runs client-side Free to use

Jump to the tool

About the CSS Text Shadow Generator

CSS Text Shadow Generator creates single or layered text-shadow effects. Each layer has its own horizontal and vertical offset, blur radius, colour and opacity, and you can add up to ten layers, reorder them or delete them. Layered shadows make effects such as glows, outlines, embossing and retro 3D text possible.

Type your own preview text and choose its colour, font size and background colour to see how the effect will look. Your text is shown as plain text only. The generated CSS includes the colour, background, font size and the full text-shadow value, ready to copy or download as a .css file.

How to use

Type your preview text and choose its colour, size and background.
Adjust the first shadow layer’s offsets, blur, colour and opacity.
Add more layers and reorder them with Move up and Move down.
Delete layers you do not need.
Copy the CSS or download text-shadow.css.

Key features

Up to 10 shadow layers.
X/Y offset, blur, colour and opacity per layer.
Add, reorder and delete layers.
Editable plain-text preview with colour, size and background.
Readable multi-line CSS output.
Copy CSS, download .css and full Reset.

Best practices

Keep body-text shadows subtle so text stays readable.
Check colour contrast against the real background.
Use several small layers for crisp outlines.
Use blur with a zero offset for glow effects.
Test at the font sizes you actually use.

Benefits

Create eye-catching headings quickly.
Fine control over every layer.
See the result on your own text and colours.
Free and private.

Frequently asked questions

In what order are multiple shadows drawn?

The first layer in the list is drawn on top and later layers go behind it. Use Move up and Move down to change the order.

How do I make glowing text?

Use a layer with 0 X and Y offset, a large blur and a bright colour. Adding two or three such layers with increasing blur strengthens the glow.

How do I create an outline effect?

Add four layers with 1px offsets in each direction (1px 0, −1px 0, 0 1px, 0 −1px) and no blur, all in the outline colour.

Does text-shadow affect layout?

No. Shadows are drawn around the text without changing its size or the space it takes up.

Why does opacity create rgba() values?

The colour and opacity are combined into an rgba() colour, so each layer can have its own transparency.

Is my preview text stored?

No. It is only displayed on the page as plain text and is cleared by Reset.

Is anything uploaded or saved?

No. The CSS is generated by JavaScript in your browser. Settings and any image you choose stay on your device and are not saved in browser storage; Reset clears them.