CSS gradient generator

Build a linear or radial gradient and copy the `background-image` CSS in this tab. Box shadows and unit conversion are sibling tools, not this URL.

A hero needs a gradient and you want the CSS, not a Figma file. That is this page.

Box shadow generator is shadows. Color palette generator is swatches. Contrast checker if text sits on the gradient — sample the actual pixels.

How to use it

1. Pick linear or radial. Add stops.
2. Copy the CSS. Fence it in docs:

.hero { background-image: linear-gradient(135deg, #222, #666); }

3. Test in dark mode; pretty gradients still fail contrast.

Honest limits

• Not mesh-gradient art.
• Not a brand kit.
• Older IE syntax is not the pitch.

This is a local CSS helper, not a design suite.