Creator
CSS Gradient Generator
Design beautiful CSS gradients in seconds. Switch between linear and radial types, tweak the angle, add up to four color stops with precise positions, and watch a live preview update instantly. Copy production-ready CSS with one click.
Examples
Input
Linear, 90deg, blue to pink
Output
background: linear-gradient(90deg, #5b6cff 0%, #ff5b9e 100%);
How to use CSS Gradient Generator
Choose a gradient type
Select linear or radial using the segmented control. Linear gradients add an angle slider.
Configure color stops
Adjust each stop's color and position, and use Add stop for up to four stops.
Copy the CSS
The live preview reflects your gradient. Click Copy to grab the background CSS.
Why use this tool
Live visual preview
Supports 2-4 color stops
Linear and radial gradients
One-click copyable CSS
Frequently asked questions
Between 2 and 4 stops, each with its own color and position.
Yes, switch the type to Radial for a centered circular gradient.
Discussion
Share feedback or ask a question about this tool.
Comments are stored to a moderated queue via the API.