Gradient Generator
Build a custom CSS gradient right in your browser — linear, radial, or conic, with up to six color stops, adjustable angle, and instant CSS you can copy. Nothing is sent to a server.
Three gradient types
Choose linear (straight line at any angle), radial (circle or ellipse from the center), or conic (rotating around a point).
Unlimited color stops
Add up to six color stops and position each one exactly where you want along the gradient.
Copy-ready CSS
The generated CSS updates live as you adjust colors and settings — copy it directly into your stylesheet.
Common Mistakes to Avoid
Using too many stops for a subtle effect
Solution:
Two or three well-placed stops usually look smoother than many closely-packed ones — start simple.
Forgetting conic gradients need browser support checks
Solution:
Conic gradients are well-supported in modern browsers but always test in your target browsers before relying on them.
Frequently Asked Questions
Radial gradients expand outward in circles/ellipses from a center point; conic gradients rotate colors around a center point like a color wheel.
Yes — drag the position slider for each stop and remove any stop (down to a minimum of two) with the X button.
Three gradient types
Choose linear (straight line at any angle), radial (circle or ellipse from the center), or conic (rotating around a point).
Unlimited color stops
Add up to six color stops and position each one exactly where you want along the gradient.
Copy-ready CSS
The generated CSS updates live as you adjust colors and settings — copy it directly into your stylesheet.