Box Shadow Generator
Design CSS box shadows visually - offset, blur, spread, colour and opacity - stack multiple layers, and copy the ready-to-use CSS.
Layers
Building believable depth
A good shadow is what separates a flat rectangle from an element that feels like it sits above the page. The trick real designers use is layering: a tight, darker shadow close to the element grounds it, while a wider, softer shadow further out suggests ambient light. Stack two or three layers here and the box lifts off the surface in a way a single shadow never manages.
Reading the syntax
Each shadow is x-offset y-offset blur spread colour, optionally prefixed with
inset. Offsets can be negative to throw the shadow up or to the left. Blur softens
the edge; spread grows or shrinks the whole shape before the blur is applied. A negative spread
is the secret to a shadow that stays tucked neatly under an element rather than leaking out the
sides. Colours use rgba so the opacity, set by the slider, lets the background
through.
Sensible defaults
- Cards and panels: small vertical offset, generous blur, 10 to 20 percent black opacity.
- Buttons on hover: bump the offset and blur slightly to imply the element rising toward you.
- Inset fields: a faint inset shadow reads as a recessed input.
- Glow effects: zero offset, wide blur and spread, a saturated colour at high opacity.
Pair this with the gradient generator for backgrounds, the colour picker to choose shadow tints, and the hex to RGB converter if you need the raw channel values.