Gradient Generator
Create beautiful CSS gradients with live preview. Linear or radial, custom stops, one-click copy.
How it works
Three simple steps —everything happens in your browser.
Pick a gradient type
Start with linear or radial mode, then set your angle or shape depending on the effect you want.
Adjust colors and stops
Choose your colors, add or remove stops, and fine-tune their positions until the preview looks right.
Copy the CSS code
Use the generated CSS exactly as shown, or start from a preset and tweak it further for your project.
Features
Linear & Radial
Switch between linear gradients with angle control and radial gradients.
Custom Color Stops
Add up to 6 color stops with individual position sliders for precise control.
Beautiful Presets
12 curated gradient presets to use as-is or as a starting point.
One-Click CSS Copy
Copy production-ready CSS code to your clipboard instantly.
Why choose Ercc Gradient Generator?
Linear & radial gradients
Choose a gradient type and angle, then add up to 6 color stops with live preview.
Copy CSS instantly
One click to copy the ready-to-use CSS code for your gradient.
Random inspiration
Click Random to discover unexpected color combinations you might not pick manually.
Pro Tips
- ●Use background-size to create repeating gradient patterns.
- ●Radial gradients are great for spotlight effects and button highlights.
- ●Click Random to discover unexpected color combinations.
Frequently Asked Questions
What gradient types does the generator support?
Both linear and radial CSS gradients are supported. Linear gradients flow in a direction you control with the angle slider; radial gradients spread outward from a center point.
How many color stops can I add?
You can use between two and six color stops. Each stop has its own color picker and position slider for precise control.
Can I copy the CSS code directly?
Yes. The generated CSS updates live as you adjust the gradient. One click copies the entire rule, ready to paste into your stylesheet.
Are the gradients production-ready?
Every gradient uses standard CSS that works in current Chrome, Firefox, Safari, and Edge versions without vendor prefixes.
Can I use the gradients commercially?
Yes. The output is plain CSS code that you can use in personal or commercial projects without attribution.