Generate text-shadow CSS instantly — add multiple shadow layers, pick from presets, preview live, and copy the CSS with one click.

Live Preview

Text Shadow
52px

Presets

Shadow Layers

Generated CSS

How to use
  1. Add layers — click “Add Layer” or choose a preset to load shadow layers instantly.
  2. Adjust each layer — slide Horizontal, Vertical, Blur, Color, and Opacity controls.
  3. Customize preview — change the preview text, its color, font size, and background.
  4. Copy CSS — click “Copy” and paste the text-shadow rule into your stylesheet.
Presets explained
PresetEffect
Neon GlowMulti-layered glow using identical hue with expanding blur
EmbossLight + dark shadows to create a pressed/raised look
RetroHard stacked shadows giving a vintage print feel
FireUpward blur layers from yellow to deep red
3DStepped solid shadows building depth and dimension
OutlineFour single-pixel shadows forming a clean text stroke
CSS text-shadow syntax
text-shadow: h-offset v-offset blur color, /* layer 1 */
             h-offset v-offset blur color; /* layer 2 */

  • h-offset — horizontal shift (negative = left, positive = right)
  • v-offset — vertical shift (negative = up, positive = down)
  • blur — blur radius in px (0 = sharp)
  • color — any valid CSS color including rgba() for transparency
Multiple shadows are comma-separated and stack front-to-back.