DESIGN TOOL

CSS Text Shadow Generator

Design a text shadow effect visually and copy the ready-to-use CSS.

Offset X (px)

Offset Y (px)

Blur (px)

Color

Opacity

Sample Text

CSS

—

About this tool

Adjust the sliders to design a custom CSS text-shadow effect with a live preview, then copy the generated CSS straight into your stylesheet.

What do the offset values control?: Offset X moves the shadow left (negative) or right (positive); Offset Y moves it up (negative) or down (positive), relative to the text.
Can I create a "glow" effect?: Yes — set both offsets to 0 and increase the blur radius for a soft glow effect radiating evenly around the text instead of a directional drop shadow.
Does text-shadow work in all browsers?: Yes — text-shadow has excellent, long-standing support across all modern browsers with no vendor prefixes needed.