CSS Gradient Generator
Build a linear or radial CSS gradient visually, with multiple color stops and copyable CSS.
0%
100%
CSS
background: linear-gradient(135deg, #2B6E5E 0%, #E8A33D 100%);
Free to use, no sign-up, no limit on how many times you run it.More color tools
Overview
Hand-writing gradient CSS with the right angle and color stops is fiddly. This tool lets you build one visually and copy the exact CSS when it looks right.
- Live preview as you adjust colors, positions, and angle
- Unlimited color stops
- Copy-ready CSS output
How to use it
- 1Choose linear or radial
- 2Adjust colors and their positions
- 3Copy the generated CSS into your stylesheet
Frequently asked questions
Can I add more than two colors?
Yes — click 'Add color stop' for as many colors as you need, and drag each one's position slider to control where it sits in the gradient.
What's the difference between linear and radial gradients?
A linear gradient transitions along a straight line at a chosen angle. A radial gradient transitions outward from a center point in a circular pattern.