CSS gradient generator

About this tool

A CSS gradient is an image generated by the browser, not a colour, which is why it belongs on background-image rather than background-color. This page builds the three gradient functions — linear-gradient(), radial-gradient() and conic-gradient() — plus their repeating variants, and shows the result on a real element as you change it.

How it works

Each colour stop is written as a colour followed by a position, and the browser blends between consecutive stops. Two stops at the same position produce a hard edge rather than a blend, which is how stripes, bars and pie segments are made. A stop with an alpha below 1 is written as rgba(); a fully opaque one is written as a plain hex value, because that is what most people expect to see in their stylesheet.

The angle in linear-gradient() is measured clockwise from "up", so 0deg runs bottom to top and 90deg runs left to right. That is the opposite convention to the one used for rotation in most drawing software, and it catches people out regularly.

Common questions

Why is there a background-color line as well?

As a fallback. If a browser cannot parse the gradient — an unsupported function, a typo, a colour syntax it does not know — it drops that one declaration and keeps the rest, so the flat colour is what the visitor sees instead of nothing. Untick "Include fallback colour" if you do not want it.

Why does my repeating gradient look like a solid colour?

Because the last stop is at 100%. A repeating gradient tiles the distance between its first and last stop, so if that distance covers the whole box there is nothing left to repeat. Bring the last stop in to something small — 10% or 20% — and the pattern appears.

Can I use this for a background on text?

Yes, with background-clip: text and a transparent text colour, but that is a separate technique with its own accessibility caveats and is not generated here.

Known limitations

• No interpolation hintsCSS lets you place a bare percentage between two stops to move the midpoint of the blend. This page does not generate those — every stop here is a colour stop.
• sRGB onlyColours are hex and rgba(), and no interpolation colour space is specified, so the browser's default applies. Wide-gamut spaces such as oklch and syntax like in oklab are not offered.
• Percentages only for stop positionsStops are positioned in %. Absolute lengths such as px or rem, which are useful for fixed-width stripes, have to be typed in by hand afterwards.
• One gradient at a timeReal stylesheets sometimes layer several comma-separated gradients on one element. Build them here one at a time and join them with commas yourself.
• The preview is not your pageThe preview box has its own size and aspect ratio. A radial or conic gradient sized by farthest-corner will look different on an element of a different shape.

The same job in the browser's own tools

• Elements → Styles → the gradient swatchChrome and Edge DevTools show a small gradient preview next to any background-image that holds one; clicking it opens an editable gradient picker on the live page.
• getComputedStyle(el).backgroundImageRead back what the browser actually resolved your declaration to, which is the quickest way to find out that a gradient was dropped as invalid.
• CSS.supports("background-image", "conic-gradient(red, blue)")Feature-detect a gradient function at runtime rather than assuming it parsed.