Skip to content
SnapTools

CSS Gradient Generator

Runs in your browser

Build a linear or radial CSS gradient from two or more colours, with a live preview and copyable CSS.

background: linear-gradient(90deg, #2563eb, #7c3aed);

About this tool

CSS gradients are just an interpolation between colour stops, but getting the angle and stop order right by editing raw CSS is fiddly. This tool builds the gradient() function for you and shows the live result, so you can adjust colours, add more stops, or switch between linear and radial without leaving the preview.

How to use

  1. Pick two or more colours — add more stops if you need them.
  2. Choose linear or radial, and set the angle for linear gradients.
  3. Copy the generated CSS `background` declaration.

When to use this tool

  • Building a hero section or button background gradient.
  • Matching a gradient from a design file into working CSS.
  • Experimenting with colour stops before committing to a design system token.

Tips

  • 0deg points to the top, 90deg points to the right, and gradients rotate clockwise from there.
  • Radial gradients ignore the angle — the stops radiate outward from the centre instead.

FAQ

Can I control where each colour stop sits?
This generator spaces stops evenly. For precise stop positions, add the percentages directly in the copied CSS (e.g. "#2563eb 20%").
Is my colour sent anywhere?
No. The gradient string is built in your browser.

Related tools