Pick a type, two colors, and where each color stop sits along the gradient. The preview and CSS update live — copy the CSS straight into a background property.
All tools/Web & CSS
CSS Gradient Generator
Build a linear or radial gradient visually, then copy the CSS.
CSS
How this works & FAQ
What is a CSS gradient generator?
A CSS gradient generator lets you pick colors and stops visually instead of writing linear-gradient() or radial-gradient() by hand, then gives you a ready-to-paste CSS value.
What's the difference between a linear and radial gradient?
A linear gradient transitions colors along a straight line at a chosen angle. A radial gradient transitions colors outward from a center point in a circle. Switch the Type dropdown above to preview either.
How do I use the generated CSS?
Copy the background: ... line above and paste it into your stylesheet — it works as a background-image value on any element.
Can I control where each color starts?
Yes — the Stop 1 and Stop 2 sliders set the percentage along the gradient where each color is centered, letting you create hard edges or smooth blends.