CSS Gradient Generator
Create linear, radial and conic CSS gradients visually — up to 5 color stops, angle control, live preview and copy-ready CSS code.
About the CSS Gradient Generator
This CSS gradient generator builds linear, radial and conic gradients visually, with a live preview that updates as you drag. Add up to five color stops, set each one's color with a native picker and slide its position along the gradient — then copy the generated CSS, complete with a -webkit- prefixed fallback line for older browsers.
The angle slider controls the direction of linear gradients (and the starting angle of conic ones), from a classic left-to-right 90° sweep to any diagonal you like. Feeling uninspired? The Random button generates a fresh color combination in one click — keep pressing until something clicks.
Gradients are pure CSS: no images to load, perfectly sharp at any resolution, and animatable. They're the fastest way to give buttons, hero sections and cards visual depth without design software.
How to Use the CSS Gradient Generator
- 1Choose linear, radial or conic as the gradient type.
- 2Set the angle with the slider (linear and conic).
- 3Adjust each color stop's color and position; add or remove stops as needed.
- 4Click Random for instant inspiration.
- 5Copy the generated CSS into your stylesheet.
Frequently Asked Questions
How do I add a CSS gradient to a background?
Copy the generated code and paste it into your element's CSS rule — for example .hero { background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); }. The tool also outputs a -webkit- prefixed line above the standard one for maximum compatibility; keep both lines in that order so modern browsers use the standard syntax.
What is the difference between linear, radial and conic gradients?
A linear gradient blends colors along a straight line at the angle you choose. A radial gradient radiates outward from the center in circles, like a spotlight. A conic gradient sweeps colors around the center point like a color wheel or pie chart — great for progress rings and knobs. All three are standard CSS supported by every modern browser.
What do the color stop percentages mean?
Each stop's percentage is its position along the gradient line: 0% is the start, 100% the end. Colors blend smoothly between neighbouring stops. Placing two stops at the same position creates a hard edge instead of a blend — a trick used for stripes and split backgrounds.
Do CSS gradients work in all browsers?
Linear and radial gradients have worked unprefixed in every major browser for over a decade, and conic gradients are supported everywhere since 2020 (Chrome 69+, Firefox 83+, Safari 12.1+). The generated -webkit- fallback line only matters for very old WebKit builds; modern code can safely rely on the standard syntax.