Design linear, radial, and conic gradients visually — adjust colors, stops, and angle with a live preview, then copy production-ready CSS. Includes a randomizer for instant inspiration.
A CSS gradient is not an image file — it's a drawing instruction the browser executes at render time. That gives it three superpowers over an exported PNG: it weighs a few dozen bytes instead of kilobytes, it scales to any element size with zero pixelation (retina screens included), and you can change it with a single line edit instead of a round-trip to a design tool. The syntax mirrors what this generator's controls do: linear-gradient(135deg, #667eea 0%, #764ba2 100%) means "run a line at 135°, start at the first color, arrive at the second at the far end." Every percentage stop marks where a color sits along that line; between stops, the browser interpolates.
The three types map to different geometry. Linear gradients flow along a line — the workhorse for hero sections, buttons, and backgrounds. Radial gradients bloom outward from a center point — spotlight effects, soft vignettes, glowing orbs. Conic gradients sweep colors around a circle like a clock hand — pie charts, color wheels, and shimmering border effects; they're also the newest, supported everywhere since 2020.
The difference between elegant and garish is almost always hue distance. Colors near each other on the wheel — blue to violet, orange to pink, teal to green — interpolate through pleasant intermediate hues. Colors far apart — red to green, blue to yellow — pass through muddy grey in the middle, because RGB interpolation cuts straight across the color wheel. The fix when you need distant hues: add a stop in between that chooses the route (blue → purple → red instead of blue → red). Two or three stops cover nearly every real design; five is the sensible ceiling this tool enforces before gradients turn into rainbow soup.
Practical conventions worth stealing: 135° (top-left to bottom-right) reads most naturally for hero backgrounds — it's the angle this very site's blog headers use; keep both end colors in the same lightness band if text sits on top, and verify readability at both extremes with our Contrast Checker; and derive stop colors from one brand color by shifting hue ±30° in our Color Converter's HSL view rather than picking unrelated colors. For palette inspiration from a photo, the Image Color Extractor hands you stops that already belong together.
No — unprefixed gradients have worked in every browser since roughly 2017, and conic gradients everywhere since 2020. The prefixed syntax you see in old tutorials is archaeology; the CSS this tool outputs runs as-is.
Banding appears when a long gradient crosses too little color distance — the browser runs out of distinguishable shades. Fixes: shorten the element, widen the color difference, or add a subtle third stop. Dark-to-dark gradients band most; adding 1–2% lightness variation usually hides it.
Not directly — background-image doesn't interpolate. The standard trick: make the background larger than the element (background-size: 200% 200%) and animate background-position, which produces the flowing-gradient effect seen on modern landing pages.
Set the gradient as the text's background, then clip it: background-clip: text; -webkit-background-clip: text; color: transparent;. (This is the one place a -webkit- prefix is still required.) Paste any gradient from this tool into that pattern.
Behind dense text, in data visualizations where color encodes meaning, and in tiny UI elements where the blend can't be perceived anyway. Gradients shine on large surfaces — heroes, cards, buttons — and as accents, not as a default coat of paint on everything.
Yes — CSS backgrounds stack: background: linear-gradient(...), radial-gradient(...); paints the first on top. Layering a transparent-to-dark linear gradient over a colorful radial one is how designers get depth; generate each layer here and join them with a comma.
Negligibly — they're computed by the GPU-accelerated renderer and cost a fraction of what an equivalent background image costs in bandwidth and decode time. The one exception: animating huge gradient areas repaints on every frame, so keep animated gradients to hero-sized elements, not full pages.