CSS Text Shadow Generator
Design beautiful CSS text shadows visually. Add multiple layers, adjust offsets, blur, and color, then copy the CSS.
The quick brown fox
Shadow Layers (1)
CSS Output
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
Presets
About CSS Text Shadows
The text-shadow property adds shadow effects to text. The syntax is: x-offset y-offset blur-radius color.
Offsets (X/Y) control the shadow's position. Positive X moves right, positive Y moves down.
Blur softens the shadow edges. A value of 0 creates a sharp, hard-edged shadow. Higher values produce a softer, more diffused effect.
No spread or inset — unlike box-shadow, text-shadow does not support spread or inset values.
Multiple shadows can be stacked by comma-separating values. Use this to create neon glows, 3D effects, outlines, and other creative typography effects.
Outline trick — apply four shadows at 1px offsets in each direction (up, down, left, right) to simulate a text stroke without using -webkit-text-stroke.