CSS Gradient Generator
Create beautiful CSS linear and radial gradients with a live preview and copy-ready code. Pick colors, angle and stops, then grab the CSS. Free gradient generator.
CSS gradient generator
Design linear and radial CSS gradients visually and copy the ready-to-use
code. Adjust colors, positions and angle and watch the live preview update,
then paste the generated background rule into your stylesheet.
Frequently asked questions
What's the difference between linear and radial gradients?
A linear gradient blends colors along a straight line at the angle you set. A radial gradient blends outward from a center point in a circle or ellipse.
How do color stops work?
Each stop is a color and a position (0–100%). Colors blend smoothly between stops, so moving a stop changes where each color sits in the gradient.
Can I use the generated CSS anywhere?
Yes. Copy the 'background' line into any element's CSS. It uses standard CSS gradient syntax supported by all modern browsers.