Box Shadow Generator
Stack multiple shadow layers — control x/y offset, blur, spread, colour, opacity and inset — on a live element preview, then copy the box-shadow CSS or matching Tailwind classes.
Layer 1Layer 2
/* CSS */
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.30), 0px 8px 10px -6px rgba(0, 0, 0, 0.20);<!-- Tailwind -->
shadow-[0px_10px_25px_-5px_rgba(0,_0,_0,_0.30),0px_8px_10px_-6px_rgba(0,_0,_0,_0.20)]How to layer box shadows
The CSS box-shadow property accepts a comma-separated list, so you can stack several shadows on one element. Soft, realistic depth usually comes from two or three layers: a tight, dark shadow close to the element plus a larger, softer one further out. Add an inset layer for pressed or neumorphic effects.
Building soft-UI? Pair stacked shadows with the free glassmorphism components and the gradient generator.