How to use it
- Type your text in Sample text. The preview shows it with the shadow, so you can judge the result on your own words.
- Set the Horizontal offset (px), Vertical offset (px) and Blur (px) of the first layer. A positive vertical offset moves the shadow down.
- Choose the Shadow colour and the Opacity of each layer, and add more layers with Add a layer for a softer glow.
- Copy the CSS declaration and paste it into the rule of your text.
How the value is built
The text-shadow property takes one shadow or a comma-separated list of shadows. Each shadow has its horizontal and vertical offsets and a blur radius, which can be left out, and a colour, which can be written before or after the lengths. The CSS Text Decoration specification gives the grammar. The first shadow is drawn on top of the others, and with no shadow the value is none.
A text shadow has no spread, unlike a box shadow. The blur radius is never negative, and a larger blur spreads the shadow over a wider area. The opacity is written as the alpha value of an rgba colour, with at most two decimals. A zero length needs no unit, so the tool writes 0.
text-shadow: offset-x offset-y blur colour, offset-x offset-y blur colour, ...Layers and what the editor checks
A soft glow often uses two or three layers: a small, dark shadow close to the letters and a larger, lighter one further out. The editor allows up to 8 layers, offsets from -200 to 200 pixels, a blur from 0 to 100 pixels and an opacity from 0 to 100 per cent.
The preview colours, the text colour and the background, are only for the preview. They are not part of the CSS, so the declaration gives the shadow and nothing else.
Worked example: a black shadow under a blue glow
The first layer has an offset of 0 and 2 pixels, a blur of 4 pixels and black at an opacity of 30 per cent. The second has no offset, a blur of 12 pixels and the blue #3b82f6 at 50 per cent.
The value is 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.5), and the declaration is text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.5);
Frequently asked questions
What is the difference between blur and a second layer?
Blur softens the edge of one shadow, so it fades out over a wider area. A second layer adds another shadow with its own offset, colour and opacity, which can be drawn in a different place from the first.
Why do the offsets have a sign?
A positive horizontal offset moves the shadow to the right and a negative one to the left. A positive vertical offset moves it down, so a shadow that falls below the text has a positive value.
Can a text shadow have a spread?
No. The text-shadow property takes an offset, a blur and a colour only. A box shadow has a spread, but text does not, so the editor does not offer one.
Why does the preview look different from my page?
The preview uses the sample text, the size and the colours you set here. On your page the shadow falls on your own font, size and background, so check the result in place before you finish.
Is anything I type saved or sent to a server?
No. The sample text, the preview and the CSS are made in your browser. Nothing is stored or sent to our server, so copy the declaration before you leave the page.
Sources
Figures and text last checked on Tuesday, November 10, 2026.