CSS Gradient Generator
FreeDesign and export CSS gradients with a live visual editor — entirely in your browser.
Runs entirely in your browser. Nothing you enter is uploaded or stored.
Color stops
Click the bar to add a stop, drag a marker to reposition it.
Angle
Presets
CSS
background: linear-gradient(135deg, #5B6EF5 0%, #E8543A 100%);How it works
What's the difference between linear, radial, and conic gradients?
A linear gradient transitions in a straight line across a given angle — the most common type, used for backgrounds and buttons. A radial gradient transitions outward from a center point in a circle or ellipse, like a spotlight or a glow. A conic gradient sweeps around a center point like the hands of a clock, which makes it the natural choice for things like color wheels or pie-chart-style visuals.
What do color stops and stop positions actually control?
A color stop is a color plus a position along the gradient (0% to 100%). Between two adjacent stops, the color transitions smoothly from one to the other. Moving a stop's position changes where that color sits and how much of the gradient is spent transitioning into and out of it — bunching stops close together creates a sharp transition, while spreading them out creates a slow, soft blend.
Will these gradients work in every browser?
Yes — linear, radial, and conic CSS gradients are all supported in every modern browser at this point (conic gradients being the most recently added, but still broadly supported for several years now). No prefixes or fallbacks needed for typical use.
Is anything about my gradient sent anywhere?
No. Every part of this tool — building, previewing, and exporting the CSS — runs locally in your browser.