CSS Box Shadow Generator Online Free

How to Use the Box Shadow Generator

1. Choose a preset or start from scratch — pick one of 20 presets or adjust the default shadow layer.
2. Add multiple shadow layers — click "Add Layer" (up to 5) for complex multi-shadow effects.
3. Adjust each layer — set X/Y offset, blur radius, spread radius, color, opacity, and inset toggle.
4. Switch modes — toggle between box-shadow, text-shadow, and drop-shadow filter.
5. Copy the CSS — click "Copy CSS" or use the Tailwind class if one matches.

Features

• ✓ 20 built-in shadow presets
• ✓ Multi-layer shadow support (up to 5)
• ✓ Per-layer color with opacity control
• ✓ Inset shadow toggle per layer
• ✓ text-shadow and drop-shadow modes
• ✓ Tailwind CSS class detection
• ✓ Dark/light background preview
• ✓ Custom element color picker
• ✓ One-click CSS copy
• ✓ Runs entirely in the browser

Understanding CSS box-shadow Syntax

The full syntax is:

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;

/* Multiple layers (comma-separated) */
box-shadow:
  0 1px 3px rgba(0,0,0,0.12),
  0 4px 16px rgba(0,0,0,0.08);

• offset-x — horizontal distance (positive = right, negative = left)
• offset-y — vertical distance (positive = down, negative = up)
• blur-radius — softness (0 = hard edge, higher = softer)
• spread-radius — size expansion before blur (+larger, -smaller)
• inset — places shadow inside the element instead of outside

Related Tools