Box Shadow Generator
Stack multiple shadows, fine-tune each with x/y/blur/spread/color/opacity/inset, and preview on a card, button, circle or input. 13 production presets including Material levels, Neumorphism, neon glow and long shadow. Output as plain CSS or Tailwind arbitrary-value classes.
Everything runs in your browser. Nothing is uploaded.
How to use this box shadow generator
- Pick a starting preset or click + Add layer to build from scratch.
- Adjust x, y, blur, spread, colour, opacity and inset per layer.
- Reorder layers with the ↑↓ buttons (top is rendered closest to the element).
- Switch the preview shape (card / button / circle / input) and tweak background and element colour.
- Copy the CSS or Tailwind arbitrary-value class.
Frequently asked questions
What is the difference between blur and spread?
Blur softens the shadow's edge — higher blur = softer shadow. Spread grows or shrinks the shadow before blurring — positive grows, negative shrinks.
What is inset?
Inset shadows are drawn inside the element instead of outside, making the element look pressed in or recessed.
Why stack multiple shadows?
Real shadows are layered — a sharp shadow close to the element plus a soft shadow further away looks more natural. Material design uses 2-3 layers.
Does the Tailwind class work in any project?
It uses Tailwind's arbitrary-value syntax (`shadow-[...]`), which requires Tailwind v3+ with JIT/arbitrary values enabled.