Web Development
CSS Gradient Generator
Build a linear, radial, or conic gradient from multiple colors and get ready-to-use CSS.
0° is up, then it goes clockwise.
A CSS gradient is a smooth transition between multiple colors, generated by the browser itself with no image needed. This tool lets you visually build a linear, radial, or conic gradient and copy the finished CSS instantly.
How to use it
- Add color stops and drag them to fine-tune where each transition happens.
- Pick a gradient type — linear (a direction in degrees), radial (shape and center position), or conic (rotation around a point).
- Copy the finished CSS with one click and paste it into background or background-image.
Common uses
- Picking a background for a hero section or button without opening a graphics editor.
- Recreating a gradient from a design mockup (Figma, etc.) in exact CSS syntax.
- Quickly experimenting with color transitions before locking a choice into a design system.
Things to keep in mind
A radial gradient defaults to stretching into the shape of its element (an ellipse), not always staying a circle — worth accounting for on rectangular blocks.
Multiple gradients can be layered by listing them comma-separated in background-image — it works like stacked layers, with the first one in the list on top.
Article about this tool: CSS gradients: how linear differs from radial and conic
Frequently asked questions
What's the difference between linear, radial and conic gradients?
Linear gradients transition along a straight line at a chosen angle, radial gradients spread outward from a center point as a circle or ellipse, and conic gradients sweep colors around a center point like a color wheel.
Are conic gradients supported in all browsers?
All current major browsers support conic gradients, but it's a newer CSS feature than linear or radial gradients, so very old browser versions may not render it.
What do I get as output?
The tool generates ready-to-use CSS background syntax with your chosen colors, stops and positions, which you can paste directly into your stylesheet.
How is repeating-linear-gradient different from a regular linear-gradient?
A regular linear-gradient stretches its color sequence exactly once across the whole element, while repeating-linear-gradient repeats that same sequence of color stops cyclically, producing a striped or patterned background.
Can I stack multiple gradients on top of each other as a background?
Yes, the background-image property accepts a comma-separated list of gradients, and they layer on top of one another the same way multiple background images would — the first one in the list ends up on top.