Gradient Generator
Build a CSS linear or radial gradient visually.
Create a linear or radial CSS gradient with multiple color stops, adjust the angle and positions visually, and copy the finished CSS.
Frequently asked questions
Can I use more than two colors?
Yes — click "Add color" to add more stops to the gradient, or remove one down to a minimum of two.
What's the difference between linear and radial?
Linear gradients blend colors along a straight line at an angle you choose. Radial gradients blend outward from a center point in a circle or ellipse.
How do I use the CSS this generates?
Copy the generated code and paste it as the "background" (or "background-image") property in your stylesheet.