CSS Gradient Generator
Design linear and radial gradients visually, then copy the ready-to-use CSS. Everything updates live in your browser.
How to make a CSS gradient
- Pick linear or radial, then set the angle for a linear gradient.
- Choose colors for your stops and set each position from 0 to 100.
- Add or remove stops to shape the transition however you like.
- Copy the generated CSS into your stylesheet or style attribute.
FAQs
What is a linear gradient?
A linear gradient blends colors along a straight line at the angle you choose, from 0 to 360 degrees.
What is a radial gradient?
A radial gradient blends colors outward from a center point in a circular or elliptical shape.
What do the position numbers mean?
Each position is a percentage along the gradient, from 0% at the start to 100% at the end. Stops are sorted by position automatically.
Does the gradient work in all browsers?
Yes. The generated CSS uses the standard linear-gradient and radial-gradient functions supported by every modern browser.
Related Tools
Why use a gradient generator?
Use the CSS Gradient Generator to design smooth color transitions visually instead of guessing at values in code, and copy production-ready CSS instantly.
- See the gradient change live as you adjust colors, angles and stops.
- Copy exact, valid CSS without hunting for syntax mistakes.
- Build multi-stop backgrounds for buttons, banners and sections in seconds.
Tips and Limits
You can add as many color stops as you like, and the generator keeps at least two so the gradient is always valid. Stops are sorted by position before the CSS is generated.