Box Shadow Generator

The CSS box-shadow property packs five values plus a color into one line, and small changes to any of them completely change the feel of a shadow. This generator turns those numbers into sliders with a live preview, so you can dial in exactly the depth you want and read off the CSS.

You control horizontal and vertical offset, blur radius, spread radius, and a separate opacity slider that the tool folds into an rgba() shadow color — so you adjust transparency without editing hex codes by hand. An inset toggle flips the shadow inward for pressed or recessed effects, and a background color picker lets you preview the shadow against the surface it will actually sit on.

It is the go-to for building a subtle card elevation, a glowing focus ring, or the soft double-shadow look of neumorphic UI. Designers and developers use the preview to judge contrast before copying the box-shadow declaration straight into their stylesheet.

A box shadow takes horizontal and vertical offset, a blur radius, an optional spread, and a colour — plus an optional inset keyword that draws the shadow inside the element rather than outside. The generator assembles those into a rule and previews the result.

The two that get confused are blur and spread. Blur softens the shadow's edge over the given distance without changing its size; spread grows or shrinks the shadow before the blur is applied, so a negative spread pulls it in. Using spread where you meant blur produces a hard-edged block.

Offsets position the shadow, and their direction implies a light source — which is why consistency across an interface matters more than any individual value.

Convincing shadows follow physics loosely. Light in an interface conventionally comes from above, so vertical offset should be positive and horizontal offset near zero — a shadow offset sideways reads as odd unless the whole interface agrees. Objects further from the surface cast larger, softer, fainter shadows, so elevation should increase blur and offset together while reducing opacity, not increase darkness.

The most common mistake is a shadow that is too dark and too tight. Real shadows are diffuse; a black shadow at high opacity with little blur looks like a border rather than depth. Low opacity with generous blur is almost always better, and layering two or three shadows — a tight faint one for contact, a wide soft one for elevation — is how the best interfaces achieve realism.

Two practical points. Define a small set of elevation levels and reuse them rather than inventing values per component; that consistency is what makes an interface feel coherent, and it is why design systems ship shadow tokens. And animating box-shadow is expensive because it forces repaints — animating the opacity of a pseudo-element carrying the shadow is the standard performant alternative.