Runs in your browser · Last updated 7 September 2026
Free CSS Gradient Generator
Free CSS gradient generator. Linear or radial from two hex stops — copy the CSS. Browser tool — nothing is uploaded.
Kind
linear
Stops
2
CSS
linear-gradient(135deg, #1d4ed8 0%, #22d3ee 50%)
How to use this tool
- Pick linear or radial and an angle.
- Enter two hex colors and the end stop percent.
- Copy the CSS. The swatch stays in this tab.
Worked example
135deg from #1d4ed8 to #22d3ee at 50% is linear-gradient(135deg, #1d4ed8 0%, #22d3ee 50%). Soften a card with the box-shadow playground.
Frequently asked questions
- Linear or radial?
- linear-gradient(angle, stops) or radial-gradient(circle, stops). Two hex stops is enough for a hero wash.
- Can I paste named colors?
- Hex only (#rgb, #rrggbb, #rrggbbaa). Pair with the hex/RGB converter if you have rgb().
- Uploaded?
- No.