All tools

CSS Gradient Generator

Build a CSS gradient in your browser — pick two colours, an angle and linear or radial, then copy the code. Free, no sign-up.

Report a problem

How to use

  1. Pick two colours, choose linear or radial, and drag the angle slider.
  2. Watch the preview update live, or press Random gradient for a fresh combination.
  3. Copy the CSS and paste it into your stylesheet — nothing is uploaded.

FAQ

How do I use the gradient in my site?

Copy the CSS and paste it as the `background` of any element, for example `.hero { background: linear-gradient(90deg, #7FB069, #E0A24E); }`. It works in every modern browser with no images or extra files.

What does the angle mean?

For a linear gradient the angle sets the direction the colours flow: 0° goes bottom-to-top, 90° left-to-right, 180° top-to-bottom. Radial gradients spread out from the centre, so the angle is ignored for them.

Is anything sent to a server?

No. The preview and the CSS are built entirely in your browser, so nothing you choose is uploaded. It works offline.