Toolstia / CSS text shadow generator
CSS text shadow generator
Create a text shadow, glow or outline effect with a live preview. Combine two shadows and copy the finished CSS line.
How it works
- Type your preview text and pick colours.
- Adjust the offset, blur, colour and opacity of each shadow.
- Copy the CSS.
The four values
A text shadow has a horizontal offset, a vertical offset, a blur radius and a colour. Positive offsets move the shadow right and down.
Glow effects
Set both offsets to 0 and use a large blur with a bright colour to make text glow.
Two layers
Use the second shadow for a softer glow, a hard outline or a 3D look. Shadows are drawn in the order listed.
Readability
Strong shadows can make small text harder to read. Check the result on the real background.
Questions
Does it work in all browsers?
Yes. The text-shadow property is supported in every modern browser.
Can I use an outline instead?
A shadow with 0 blur and offsets of 1 pixel in each direction gives a simple outline.
Is anything uploaded?
Everything happens in your browser, and nothing you type is sent anywhere.