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.

Design

Move the shadow with the offset sliders, soften it with blur, and pick a color. Copy the CSS when it looks right.

Shadow text

Sample text

Font size

Text color

Offset X2px

Offset Y2px

Blur4px

Shadow color

CSS

text-shadow: 2px 2px 4px #00000066;

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.