Generate CSS Gradients
Design beautiful CSS gradients and copy the code.
How to use the CSS Gradient Generator
Choose linear or radial
Linear blends along a straight line. Radial spreads outward from a centre point.
Add and position colour stops
Add as many colours as you need and drag each stop to place it along the gradient.
Copy the CSS
Adjust the angle or shape until it looks right, then copy the generated CSS into your stylesheet.
About the CSS Gradient Generator
CSS gradient syntax is easy to read and miserable to write from memory. Angles are measured from a direction that surprises most people the first time, colour stop positions interact in ways that are hard to predict, and the only reliable way to get a gradient right is to see it change as you adjust it. That is what this tool is for: build the gradient visually, then copy CSS you can paste straight into a stylesheet.
Both types are covered. A linear gradient blends along a straight line at whatever angle you set, and is the one to use for buttons, hero sections and background bands. A radial gradient spreads outward from a centre point in a circle or ellipse, which suits spotlights, glows and subtle vignettes. Either way you can add as many colour stops as you need and drag each one along the track.
The output is plain, production-ready CSS with no dependency on this site and no vendor prefixes you do not need, since every current browser has supported unprefixed gradients for years. Everything runs in your browser, and the generated CSS is yours to use in any project, commercial or otherwise.
Frequently asked questions
- How do I create a CSS gradient?
- Choose linear or radial, add your color stops, set the angle, then copy the generated CSS straight into your stylesheet.
- What is the difference between linear and radial?
- A linear gradient blends along a straight line at an angle you choose. A radial gradient spreads outward in a circle or ellipse from a center point.
- Can I use more than two colors?
- Yes. Add as many color stops as you need and position each one along the gradient.