CSS Gradient Generator

Pick colors, set the angle, copy the CSS — done.

FREE TOOL · COPY-READY CSS · NO SIGN-UP
Stop 1
Stop 2
background: linear-gradient(90deg, #ff512f, #dd2476);

Paste the snippet into any stylesheet as a background.

🌈 How to Use This Gradient Generator

  1. 1.Pick your colors. Start with two stops, add up to four for richer blends.
  2. 2.Set the angle. Drag the slider to aim a linear gradient — 90° runs left to right, 180° runs top to bottom.
  3. 3.Try radial. Switch the type to blend colors outward from the center in a circle.
  4. 4.Copy and paste. One tap copies the snippet — paste it as a background anywhere in your CSS.

❓ FAQ

How do I use the CSS snippet?

Pick your colors and angle, then click Copy CSS and paste the snippet into your stylesheet. For example as the background of a button, banner or page section. It works in all modern browsers.

What is the difference between linear and radial gradients?

A linear gradient blends colors along a straight line at your chosen angle, while a radial gradient blends them outward from a center point in a circle. Try both and pick the look you like.

Can I use more than two colors?

Yes. Add up to four color stops. Extra colors are spaced evenly across the gradient, and the snippet updates instantly.

Is the gradient generator free?

Yes. 100% free, no sign-up. Everything runs in your browser; nothing is uploaded or tracked.

More free tools →