🌫️Box Shadow Generator

Designing a shadow

Drag the sliders — offset, blur, spread, opacity — and watch the preview; stack up to five layers for depth, flip any layer inset for inner shadows, and copy the finished box-shadow rule. The presets encode the useful idioms: subtle card, soft float, layered depth, hard "brutalist" pop, inner glow.

What separates a good shadow from a smudge

Real light is diffuse, so believable elevation is several soft shadows at low opacity — a tight one for contact, a broad one for ambience — not one heavy blur at 50% black. That is the layered-depth preset, and it is how every design system's elevation scale works. Negative spread tucks a large blur behind the element, the secret of the floating-card look.

Technicalities worth knowing: box-shadow follows the element's border-radius, paints outside layout (it never pushes neighbours), and blur is expensive to animate — animate a pseudo-element's opacity instead if hover effects stutter. In dark UIs shadows nearly vanish against dark backgrounds; raise elevation there by lightening the surface. The background half of the aesthetic is the gradient generator's department, and colours with proper contrast come from the colour converter's checker.

Frequently asked questions