Box Shadow Generator

Design box shadows with live feedback

A well-tuned box-shadow can make an interface feel layered, clickable and polished. A poorly tuned shadow can make the same interface look muddy or inconsistent. This generator gives you direct controls for the values that matter: horizontal offset, vertical offset, blur, spread, color, opacity and inset mode. As you move each slider, the preview and CSS output update immediately, making it easier to find a natural result than typing numbers by hand.

The output is a standard CSS declaration, so it works for cards, modals, buttons, dropdowns, navigation bars and any other element that accepts box-shadow. No images are created and nothing is uploaded. The browser simply applies the shadow to the preview element and copies the final CSS when you are ready.

Understanding offset, blur and spread

Horizontal and vertical offsets move the shadow away from the element. A positive vertical offset often suggests the object is raised above the page, while a shadow with little offset can feel like a glow. Blur controls softness: low blur creates a hard, graphic edge, while higher blur creates a more realistic diffused shadow. Spread changes the size of the shadow before blur is applied. Positive spread makes the shadow broader and heavier; negative spread tightens it so the blur feels more subtle.

Using shadows in a design system

Shadows are most effective when they are consistent. Instead of inventing a new shadow for every component, create a small elevation scale: a subtle shadow for cards, a stronger one for popovers and a focused one for modals. Test shadows on both light and dark surfaces, because the same opacity can feel too strong on a pale background and too weak on a dark one. Inset shadows are useful for pressed states, input wells and recessed panels, but they should be used sparingly so controls still feel clear and accessible.