CSS Gradient Generator

How to use?

Start by picking the gradient type, linear or radial, then tweak the colors and the position of each stop and copy the CSS that shows up. This code drops straight into your element's background or background-image property.

CSS gradients: types, interpolation and performance

A CSS gradient is a function — not an image — that the browser evaluates per pixel at paint time, producing a smooth colour transition. Because it is computed on the GPU, a gradient scales to any size with no loss in quality and no additional network request — unlike a PNG, where a 2000×2000 background can weigh several hundred KB. Modern CSS exposes four functions: linear-gradient(), radial-gradient(), conic-gradient() and their repeating-* variants for tileable patterns.

The base syntax for a linear gradient takes an angle (or a keyword like to right, to bottom right) followed by two or more colour stops:

background: linear-gradient(45deg, #ff6b6b 0%, #4ecdc4 100%);
background: radial-gradient(circle at top right, gold, transparent 70%);
background: conic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red);

Linear, radial and conic — when to use each

• linear-gradient — the most common: hero backgrounds, buttons, banners. Takes an angle from 0° (bottom to top) to 360°.
• radial-gradient — radiates from a point (circle or ellipse); ideal for spotlights, vignettes and glow effects.
• conic-gradient — sweeps angularly around a centre; powers CSS-only pie charts, colour wheels and loading spinners. Chrome 69+/Safari 12.1+.
• repeating-*-gradient — repeats colour stops to form tileable patterns: stripes, ribbons, checkerboards without any image asset.

Color stops and hard stops

Each colour stop accepts an optional position (red 20%, blue 80%) which controls where the colour starts and finishes interpolating. Using the same position for two adjacent stops creates a hard stop, producing solid stripes without anti-aliasing:

background: linear-gradient(red 0%, red 50%, blue 50%, blue 100%);
/* result: a half-red, half-blue rectangle, no transition */

Interpolation: sRGB vs OKLCH

Until 2023 every browser interpolated gradients in sRGB, which produces a muddy grey-brown band when the two stops are complementary (blue → yellow passes through grey). CSS Color 4 allows interpolation in perceptual spaces such as oklch or hsl longer hue:

background: linear-gradient(in oklch to right, blue, yellow);
/* vibrant transition through green, no grey mud */

Performance and accessibility

CSS gradients are GPU-accelerated and outperform a PNG background for large surfaces — no decoding, no HTTP request, no cache eviction. For complex non-rectangular shapes (logos, badges), an SVG gradient is preferable because it follows the shape. On accessibility: text on a gradient often needs text-shadow or a backdrop-filter blur layer to meet WCAG AA 4.5:1 contrast — measure both endpoints of the gradient against your text colour, not just one.

FAQ

Can I use transparency in a gradient? Yes. Use rgba(), hsla() or any colour with alpha. A common trick is fading to transparent on top of an image to create text overlays — but be aware Safari historically interpreted transparent as rgba(0,0,0,0), causing greyish fades. Use rgba(255,255,255,0) instead when the background colour is light.

Gradient vs background image — which performs better? The gradient wins for any flat colour transition: zero bytes of network, GPU paint, infinite scalability. The image wins for photographic content or complex artistic effects no math can describe.

SVG gradient or CSS gradient? Use CSS for backgrounds on rectangular elements. Use <linearGradient> / <radialGradient> inside SVG for filling logos, icons and non-rectangular shapes — the gradient follows the path.

What about browser support? Linear and radial gradients have ~98% support (every browser since 2012). Conic gradients are at ~95% (Chrome 69+, Safari 12.1+, Firefox 83+). Interpolation in oklch requires Chrome 111+, Safari 16.4+, Firefox 113+.