CSS gradient generator

How it works

Picking linear builds a linear-gradient(Ndeg, color1, color2) value from your chosen angle and two colors; picking radial builds a radial-gradient(circle, color1, color2) value instead and disables the angle field, since a radial gradient has no single direction.

FAQ

Why is the angle input disabled when I pick radial?

Radial gradients don't have a direction the way linear ones do — they always radiate outward from a center point, so the angle field only applies to the linear type.

Can I add a third color stop?

Not with this tool — it only builds a two-color gradient; for more stops you'd add extra comma-separated color/position pairs to the generated CSS by hand.