CSS Box Shadow Generator Online Free
Build multi-layer CSS box shadows visually. Control offset, blur, spread, color, and opacity per layer. Copy the generated CSS or Tailwind class with one click — no signup, no limits.
How to Use the Box Shadow Generator
- Choose a preset or start from scratch — pick one of 20 presets or adjust the default shadow layer.
- Add multiple shadow layers — click "Add Layer" (up to 5) for complex multi-shadow effects.
- Adjust each layer — set X/Y offset, blur radius, spread radius, color, opacity, and inset toggle.
- Switch modes — toggle between box-shadow, text-shadow, and drop-shadow filter.
- 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
Frequently Asked Questions
What is a CSS box shadow?
The CSS box-shadow property adds shadow effects around an element's frame. You can set the horizontal offset, vertical offset, blur radius, spread radius, color, and whether the shadow is inset (inside the element).
Can I add multiple layers of shadow?
Yes. CSS box-shadow supports multiple layers separated by commas. This generator lets you add up to 5 independent layers, each with its own offset, blur, spread, color, and opacity.
What is the difference between box-shadow, text-shadow, and drop-shadow?
box-shadow applies to the element's bounding box. text-shadow applies only to text characters. drop-shadow() is a CSS filter that follows the alpha channel of the element, making it useful for irregular shapes like PNGs.
Does this generator show Tailwind CSS equivalents?
Yes. When a single-layer shadow matches a Tailwind utility class (shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl), the generator shows the equivalent Tailwind class alongside the CSS output.
What does the spread radius do?
The spread radius expands or contracts the shadow before blur is applied. A positive value makes the shadow larger than the element; a negative value makes it smaller. Combined with no blur, it creates a hard-edged offset copy of the element.
What is an inset shadow?
An inset shadow appears inside the element rather than outside, giving a "pressed in" or "cutout" appearance. Toggle the Inset checkbox for any shadow layer to switch between outer and inner shadow.