CSS gradient generator
Design a gradient and copy ready-to-use CSS code.
- Instant
- Free
- Private (processed locally)
- No sign-up
Create the perfect gradient without writing a line of CSS
Gradients are everywhere in modern design: hero backgrounds, buttons, cards, decorative text. This generator lets you compose them visually — colors, positions, angle, type — and copy clean, production-ready CSS code.
-
Pick the type
Linear for a directional transition, radial for a central halo, conic for wheel or pie effects.
-
Adjust colors and positions
Change each color with the picker, move its position with the slider, add up to 6 stops. The Random button suggests harmonious combinations.
-
Copy the CSS
The code updates in real time. One click and it is in your clipboard.
Three functions, three geometries
| Function | Geometry | Typical use |
|---|---|---|
| linear-gradient(angle, …) | Oriented straight line | Backgrounds, buttons, overlays |
| radial-gradient(circle, …) | Concentric circles | Halos, spotlights, vignettes |
| conic-gradient(from angle, …) | Rotation around the center | Pie charts, color wheels, animated borders |
Tips for great gradients
- Stay within neighboring (analogous) hues for a smooth result; opposite hues travel through dull gray zones.
- For gradient text, combine background-clip: text with color: transparent.
- On large surfaces, add subtle noise to avoid visible banding.
- Mind contrast: text placed on a gradient must stay readable across the whole color range.
The generated code uses hex colors for maximum compatibility. You can swap them for CSS variables (var(--my-color)) in your project.
Frequently asked questions
What is the difference between linear, radial and conic?
linear-gradient progresses in a straight line at an angle; radial-gradient radiates from the center outward; conic-gradient sweeps around the center like a color wheel. All three accept the same color lists.
How many colors can I use?
The tool handles up to 6 stops, which covers almost every need. In pure CSS the number is unlimited, but beyond 4 or 5 colors a gradient quickly becomes hard to control.
What do the percentages next to the colors mean?
It is the stop’s position along the gradient axis: 0% at the start, 100% at the end. Two close stops create a sharp transition, two distant stops a gradual blend.
Does the generated code work in all browsers?
linear-gradient and radial-gradient have been supported everywhere for years. conic-gradient is available in all modern browsers (Chrome 69+, Firefox 83+, Safari 12.1+).
How can I animate a CSS gradient?
Gradients cannot be animated directly, but two techniques work well: animating background-position on an oversized gradient (background-size: 200%), or animating colors through custom properties registered with @property.