CSS Gradient Generator

How it works

We assemble a standard CSS linear-gradient or radial-gradient declaration from your color stops and angle. The CSS works in every modern browser without a vendor prefix.

Frequently asked

Linear or radial?

Linear for backgrounds, headers, buttons (most common). Radial for vignettes, spotlights, decorative dots. Conic gradients are now supported too but rarer.

How many color stops should I use?

Two for clean modern gradients. Three or more for sunset / mesh-style backgrounds, but watch for visual banding on subtle transitions.

Why does my gradient look banded?

Banding happens when colors are too similar over a long distance. Add an intermediate stop or use slightly more contrast.