Box Shadow Generator

Creating natural, realistic shadows

Shadows help separate cards, menus, buttons and dialogs from the background, giving a sense of depth that guides the eye. The difference between a shadow that looks professional and one that looks dated is mostly subtlety. Harsh, dark, tightly offset shadows tend to look heavy, while soft, large, low-opacity shadows feel natural, much like the light around real objects.

This generator gives you control over horizontal and vertical offset, blur, spread, colour, opacity and corner radius, with a live preview. Spread changes the size of the shadow before any blur is applied, and a slightly negative value pulls the shadow in beneath the element, which gives a particularly clean, refined look. Turn on the layered option to stack two shadows, a tight one for contact and a broader one for ambient light, which is the technique many modern design systems use for realistic depth.

Tinting a shadow with a dark version of your background or brand colour, rather than pure black, makes it blend more naturally. Keep shadows consistent across a site, perhaps with two or three levels for resting, hovered and raised elements, so depth communicates meaning instead of being decoration. Inset shadows create a pressed-in look that suits input fields and toggles. On dark backgrounds, shadows are harder to see, so lighter borders or subtle highlights can work better. Box shadows are cheap for browsers to draw in most cases, but very large blurs on many elements can affect scrolling on low-end phones, so test on a real device. Copy the CSS when it looks right.