CSS Gradient Generator
Build a linear or radial gradient visually — add color stops, adjust the angle, and copy the exact CSS background value.
Color stops
About the CSS Gradient Generator
CSS gradients render entirely as vectors — no image request, no fixed pixel dimensions, and they scale perfectly at any size, which is why they've mostly replaced gradient background images for anything but the most complex effects. linear-gradient() paints along a straight line at a given angle; radial-gradient() paints outward from a center point instead.
Getting a gradient to look intentional rather than muddy usually comes down to the color stops: too few stops between very different hues can produce a visible band, while adding an intermediate stop close to the transition point smooths it out.
How to use it
- 1Add color stops and drag them to adjust position.
- 2Set the angle (linear) or shape (radial).
- 3Copy the generated CSS background value.
Features
- Linear and radial gradients
- Any number of color stops with adjustable position
- Angle control for linear gradients
- Live preview and one-click copy of the generated CSS
Frequently asked questions
What is the difference between linear-gradient and radial-gradient?
linear-gradient() transitions colors along a straight line at a specified angle. radial-gradient() transitions outward from a center point in a circular or elliptical shape.
How do I control where a color stop sits?
Each color stop can take an explicit position (a percentage), e.g. linear-gradient(90deg, red 0%, blue 60%, black 100%) — without explicit positions, stops are spaced evenly.
Can I use more than two colors?
Yes — CSS gradients support any number of color stops in one declaration.
Is this saved or synced anywhere?
No. It's a local editor — the generated CSS is yours to copy and use; nothing is stored or uploaded.