CSS Box Shadow Generator

The CSS Box Shadow Generator lets you design a drop shadow by feel rather than by trial and error in the dev tools.

Drag sliders for the horizontal and vertical offset, the blur radius and the spread, set the shadow colour, and flip the inset toggle to draw the shadow inside the element instead of outside it.

A live preview updates as you move each control, and the exact box-shadow declaration is shown ready to copy.

Shadows are deceptively fiddly: a few pixels of blur or a slightly too-dark colour is the difference between a shadow that looks crisp and one that looks muddy.

Seeing the result immediately, next to the generated value, makes it easy to dial in a soft elevation, a hard offset border or a subtle inset press effect.

The blur is never allowed to go negative, which is an easy mistake to make by hand, and the offsets and spread accept negative values where CSS does.

This is handy for cards, buttons, modals, focus rings and any component that needs to lift off the page.

Reach for it when you want a shadow that matches a design spec, or when you just want to experiment until something looks right.

The generator is pure client-side code: nothing you build is uploaded, and the copy button drops the value straight into your stylesheet.