Design & CSS

CSS Text Shadow Generator

Build multi-layer text shadows visually — set offset, blur, and color per layer; pick from 11 curated presets (3D extrude, long shadow, neon glow, letterpress, cyberpunk…); then copy CSS, Tailwind, React inline, SCSS, or JSON.

Live preview

Edit the sample text, typography, and background — the shadow updates instantly.

Sample Text

Sample text

Font family

Weight

Size

Text color

Background

Preset gallery

Click any preset to load it into the layer stack.

Shadow layers

1 / 8

Stack up to 8 layers. The first layer paints on top — use the arrows to reorder.

#12px 4px 6px

Offset X

Offset Y

Blur

Alpha: 35%

Code output

Plain CSS block, Tailwind arbitrary value, React inline style, SCSS, or JSON.

color: #0f172a;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 72px;
font-weight: 800;
text-shadow: 2px 4px 6px rgba(0, 0, 0, 0.35);