CSS Gradient Generator

CSS Gradient Generator at a glance

What it does: Build linear and radial CSS gradients visually, adjust colour stops and angles, and copy production-ready CSS. Live preview as you edit.
Where it runs: Entirely in your browser — no data is uploaded
Works offline: Yes, once the page has loaded
Cost: Free, with no account and no usage limit
Category: Design & Colors

How to use the gradient generator

Choose linear or radial.
Set your colour stops - two is usually enough, more if you need a specific curve.
Adjust the angle or position and watch the preview.
Copy the CSS straight into your stylesheet.

The CSS syntax

/* Linear: angle, then stops */
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);

/* Radial: shape and position, then stops */
background: radial-gradient(circle at 30% 30%, #6366f1, #1e1b4b);

/* Repeating, for stripes */
background: repeating-linear-gradient(45deg, #333 0 10px, #444 10px 20px);

Angles run clockwise from pointing upward: 0deg goes bottom to top, 90deg left to right, 180deg top to bottom. The keyword forms - to right, to bottom right - are often clearer to read.

Stops without explicit positions are distributed evenly. Giving a stop the same position as the previous one produces a hard edge rather than a blend, which is how you make stripes.

Why gradients look banded, and how to fix it

Banding is the visible stepping in a smooth gradient, most obvious across a large area with a gentle colour change. The cause is that 8-bit colour offers only 256 levels per channel, and a subtle gradient across 1,000 pixels has to repeat each level several times.

Three things help. Add intermediate colour stops so the interpolation follows a more perceptual curve. Overlay a very subtle noise texture, which is what film grain does and why it hides banding so effectively. Or avoid extremely low-contrast gradients over very large areas in the first place.

Gradients between complementary hues have a related problem: they pass through a desaturated grey in the middle. Adding a stop with a more saturated intermediate hue keeps the transition alive.

Performance and practicalities

CSS gradients are rendered by the browser and cost nothing to download, so they are strictly better than a gradient image - no request, no file, resolution-independent, and they respond to container size.

Two things to watch. Animating a gradient by changing its stops forces a repaint on every frame and is expensive; animate background-position or a transform on an overlay instead. And a full-viewport gradient combined with a blur filter is one of the more reliable ways to make a page scroll badly on mid-range phones.

Using gradients well

Keep the hues close. Analogous colours - neighbours on the wheel - blend cleanly. Distant hues muddy in the middle.

Mind the text on top. Contrast changes across a gradient, so text that is legible at one end may fail at the other. Check both ends, and consider a semi-transparent scrim behind the text.

Subtle beats dramatic. A gradient with a small hue shift reads as depth and quality. A rainbow reads as a template from 2013.

Use them for depth, not decoration. A gradient that suggests a light source - lighter at the top, darker at the bottom - looks natural because it matches how we expect surfaces to behave.

Newer gradient features

conic-gradient() sweeps around a centre point, which is how you build pie charts and colour wheels in pure CSS.

Interpolation colour spaces are now available: linear-gradient(in oklch, red, blue) blends through a perceptually uniform space, avoiding the dull grey midpoint that sRGB interpolation produces between complementary colours. Support is good in current browsers, and the sRGB behaviour is a reasonable fallback.

Multiple backgrounds stack, so you can layer a subtle radial highlight over a linear base - a common technique for making a flat panel look lit.

Frequently asked questions

Bottom to top. Angles increase clockwise, so 90deg goes left to right and 180deg top to bottom. The keyword syntax, such as to bottom right, avoids having to remember this.

Banding, caused by 8-bit colour depth across a gentle transition over a large area. Add intermediate stops, or overlay very subtle noise.

Yes, in essentially every respect: no download, no resolution limit, they adapt to container size, and they can be changed by a single line of CSS.

Colour stops do not animate smoothly and repainting them is expensive. Animate background-position on an oversized gradient, or fade between two layered gradients, both of which the compositor handles efficiently.

Nothing you enter here leaves your browser

CSS Gradient Generator does its work in JavaScript running on your own device. The page loads once, and after that there is no upload step and no server involved — which matters here because images carry metadata, and unreleased artwork should not be uploaded to convert it.

You can verify this rather than taking our word for it: load the page, disconnect from the internet, and the tool keeps working. Our privacy policy sets out what is and is not collected, and this guide explains why the distinction matters.