Text Shadow Generator
Build a CSS text-shadow with sliders for offset, blur, and color, over live sample text.
Move the shadow with the offset sliders, soften it with blur, and pick a color. Copy the CSS when it looks right.
text-shadow: 2px 2px 4px #00000066;About Text Shadow Generator
Drag the offset and blur sliders, pick a shadow color with alpha, and watch the effect on your own sample text. Copy the text-shadow rule when it looks right.
How it works
Set the horizontal and vertical offset to move the shadow, and raise the blur to soften it. Pick a shadow color (alpha included for transparency) and a text color, then type your own words into the sample field. The preview updates live, so you can read the exact result at the font size you'll ship before copying the CSS.
When you'd use this
- Making headings pop against a busy background or hero image
- Adding a subtle lift to large display type
- Faking an outline or glow by stacking a tight, zero-offset shadow
- Matching a shadow to an existing design without guessing pixel values
Text shadow syntax
The CSS text-shadow property lists the horizontal offset, vertical offset, blur radius, and color, in that order. Positive offsets push the shadow right and down, negative ones go left and up. A blur of 0 keeps a hard edge. You can stack several shadows by separating them with commas, which is how outlines and neon glows are built.