Home CSS ToolsCSS Text Shadow Generator

CSS Text Shadow Generator

Create multi-layer CSS text shadows visually. Control offset, blur, color, and opacity for each layer. Supports glow and neon effects.

Layer 1

0px 0px 10px

Layer 2

0px 0px 30px

Color

#3b82f6

Opacity100%

Offset X0px

Offset Y0px

Blur Radius10px

Preview Text

Font Size72px

Weight

Background

Live Preview

Toolkits Center

CSS Output

.text {
  text-shadow: 0px 0px 10px rgba(59, 130, 246, 1),
         0px 0px 30px rgba(59, 130, 246, 0.5);
  font-size: 72px;
  font-weight: 800;
}

Pro tip: Stack multiple layers with 0px offset and increasing blur for a beautiful neon glow effect. Try the Neon Blue or Neon Pink presets!

Ad Placeholder

header horizontal Unit

Stack up to 6 independent shadow layers. Toggle them on/off to build complex, layered text effects.

Use the built-in presets to instantly create neon glow, emboss, retro, and long shadow text effects.

The generated CSS is clean and production-ready. Copy it directly into your stylesheet.

Ad Placeholder

below tool horizontal Unit