Color
  • Free forever
  • No sign-up
  • Instant results

CSS Gradient Generator

Build CSS linear and radial gradients visually. Pick your colours, set stop positions, and copy the ready-to-use CSS background property with a live preview.

Related Calculators

Aspect Ratio
Base64
Basic Math
Border Radius %
Breakpoints
Color Blind Sim
CSS output
—

When would you use this?

Gradients are one of those CSS features where writing the syntax by hand is just annoying enough that everyone reaches for a generator. This one keeps it simple. Choose linear or radial, pick your two colour stops, set their positions, and get the CSS output with a live preview.

Common Questions

What's the syntax for a CSS linear gradient?

What's the difference between linear and radial gradients?