Design
CSS Gradient Generator
Design linear and radial gradients with live preview. Copy the CSS in a click.
Frequently asked questions
Linear vs radial?
Linear goes in a direction (angle), radial spreads outward from a center point. Both are great for backgrounds and accents.
Can I add more colors?
This tool supports up to 3 stops. For more complex gradients, you can extend the generated CSS by hand.