Gradient Shadow Generator

A soft, coloured gradient glow under cards, images and buttons. box-shadow only does one colour — this does a whole gradient, in pure CSS.

Glow behind the elementCSS · HTML
CSS
HTML

How a gradient shadow works

box-shadow only takes one colour. A gradient glow is a blurred copy of a gradient on a ::before layer behind the element. transform-style: preserve-3d with translateZ(-1px) tucks that layer behind the element’s own background, so your card stays white and the glow spills out around it — no extra markup.

Getting it right

Give the element a background of its own — the glow sits behind it. A negative Spread keeps the glow tucked in so it reads as a shadow; a positive one turns it into a halo. More Offset makes the element look lifted. On a dark page, raise the strength; on a light page, keep it subtle.

For a coloured border instead, try the Gradient Border Generator; for buttons with a glow built in, the Gradient Button Generator.