CSS Gradient Generator

A CSS gradient generator lets you design smooth colour blends visually and copy clean code instead of guessing angles and percentages by hand. Our free tool builds linear, radial and conic gradients with as many colour stops as you like. Drag stops along the bar, set opacity, change the angle or centre point, try the presets, and switch on modern OKLab or OKLCH interpolation for smoother blends. The CSS updates live with a solid fallback colour for older browsers, and everything runs in your browser.

How to use the CSS gradient

1. 1 Choose a gradient typePick linear for a straight blend across an element, radial for a blend that spreads out from a point, or conic for colours that sweep round a centre like a clock face.
2. 2 Add and arrange colour stopsClick the bar to add a stop at that position, drag the handles to move them, and select a stop to change its colour, hex value, position and opacity. Every gradient needs at least two stops.
3. 3 Set the angle or centreFor linear and conic gradients set the angle with the slider or the quick buttons. For radial and conic gradients move the centre point and choose the shape and size.
4. 4 Pick an interpolation methodLeave it on sRGB for the classic result, or try OKLab and OKLCH, which avoid the dull grey band that often appears between two bright colours.
5. 5 Copy the CSSCopy the code with its fallback lines and paste it into your stylesheet, a component or an inline style. The preview shows exactly what you will get.

How CSS gradients work

A CSS gradient is an image that the browser draws for you. Because it is an image, you use it anywhere CSS accepts one, most often in background-image, but also in border-image, mask-image and list-style-image. There is no file to download, it scales to any size without going blurry, and you can change it with one line of code. That makes gradients a light alternative to large background photographs, especially on mobile connections.

Every gradient has two parts: a shape that says how the colours travel across the element, and a list of colour stops that says which colours appear and where. A colour stop is a colour plus an optional position, usually a percentage of the gradient line. If you leave positions out, the browser spreads the stops evenly. If two stops share the same position, you get a hard edge instead of a blend, which is how striped and pie chart effects are made.

The three gradient functions are linear-gradient, radial-gradient and conic-gradient, and each has a repeating version that tiles the pattern once it reaches the last stop. Repeating gradients are useful for stripes, progress bars and subtle textures, but they only repeat if the last stop is placed before 100 per cent.

Linear, radial and conic: which to use

Each type suits different jobs. The generator lets you switch between them without losing your colour stops, so it is quick to compare.

• Linear gradients run along a straight line at an angle. 0deg points up, 90deg points right and 180deg points down. They are the usual choice for hero sections, buttons, cards and overlays that darken a photograph so white text stays readable.
• Radial gradients spread out from a centre point as a circle or an ellipse. The size keyword decides where the last stop ends: farthest-corner is the default, while closest-side keeps the blend tight. Radial gradients work well for spotlights, soft glows behind a product and vignettes.
• Conic gradients sweep colours around a centre point, starting from an angle you choose. Smooth stops give colour wheels and metallic sheens, while hard stops at the same position give pie charts and segmented rings without any JavaScript.
• Repeating gradients tile any of the three types. A repeating linear gradient with hard stops produces diagonal stripes, which are handy for warning bars, placeholders and progress indicators.

Modern colour interpolation with OKLab and OKLCH

Gradients have traditionally blended colours in the sRGB colour space, which is simple but not how our eyes see colour. When you blend two saturated colours that sit on opposite sides of the colour wheel, such as blue and yellow, the midpoint in sRGB is often a flat grey or muddy brown. The colours are mathematically halfway, but they look dull.

Current versions of Chrome, Edge, Safari and Firefox support a color interpolation method inside gradient functions, for example linear-gradient(90deg in oklch, blue, yellow). OKLab is a perceptual colour space, so it produces an even, natural blend without the grey dip. OKLCH works in lightness, chroma and hue, so it travels round the colour wheel and keeps the in-between colours vivid. Try both: OKLab tends to suit subtle brand blends, while OKLCH suits bold, colourful designs.

Browsers that do not understand the new syntax ignore the whole declaration. That is why the generator, with fallbacks switched on, writes a plain sRGB version first and the modern version second. Older browsers keep the first line, newer ones use the second, and nobody sees a blank background.

Fallbacks, performance and accessibility

With fallbacks on, the generator also adds a background-color set to the average of your stops. It is painted before the gradient image, so if the gradient fails for any reason, or while a page is still being styled, the element still has a sensible colour behind it. This matters most when text sits on top of the gradient.

Gradients are cheap for the browser to draw, far cheaper than a large hero photograph, and they never trigger an extra network request. Avoid animating background-position on large gradients many times a second on low-powered phones, and prefer animating opacity or transform on a layer instead.

Contrast is the main accessibility risk. Text has to be readable against every part of the gradient it covers, not just the darkest or lightest end. Check the lightest point under white text, or the darkest point under dark text, with our Colour Converter and Contrast Checker. WCAG asks for at least 4.5:1 for normal body text and 3:1 for large text. If a gradient is purely decorative, it needs no alternative text, but any information shown only through colour, such as a gradient legend on a chart, should also be explained in words.

Design tips for gradients that look professional

The most convincing gradients are usually subtle. Pick two colours that are close in hue, such as a mint and a deeper teal, rather than two unrelated brights. Adding a third stop slightly off the midpoint gives a blend more depth and stops it looking flat. Angles between 110 and 160 degrees tend to feel more natural than a perfectly vertical or horizontal blend, because light in real scenes rarely falls straight down.

Use transparency to lay gradients over photographs. A linear gradient from rgb(0 0 0 / 0.6) to transparent across the bottom third of a hero image keeps headlines readable without hiding the picture. You can stack several gradients in one background-image, separated by commas, with the first one drawn on top.

Gradient text is made by setting the gradient as the background, then adding background-clip: text and a transparent text colour. Keep it to large headings, check that the text is still readable at every point, and always set a solid colour fallback so the heading never disappears.

Using the generated CSS in your project

The code works as ordinary CSS in any website, theme or framework. Paste it into a class in your stylesheet, a style block in a WordPress theme, or the custom CSS box in a page builder. In Tailwind CSS you can use the value as an arbitrary background image, or add it to the theme as a named background so the whole team uses the same gradient.

If you use the same gradient in several places, store it in a CSS custom property such as --brand-gradient and refer to it with var(). Then a rebrand only needs one change. Everything in the generator runs on your device, so you can experiment with unreleased brand colours without sending them anywhere.

Examples you can copy

.hero {
  background-color: #14c299;
  background-image: linear-gradient(115deg, #6eeecb 0%, #1de9b6 50%, #0a9a7b 100%);
}

.banner {
  background-image: linear-gradient(90deg, #2563eb 0%, #facc15 100%);
  background-image: linear-gradient(90deg in oklch, #2563eb 0%, #facc15 100%);
}

.card {
  background-image:
    linear-gradient(0deg, rgb(0 0 0 / 0.65) 0%, rgb(0 0 0 / 0) 60%),
    url("/images/team.jpg");
  background-size: cover;
}

.pie {
  width: 160px; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(#1de9b6 0% 40%, #0a0a0a 40% 70%, #c9c9c4 70% 100%);
}

Common mistakes to avoid

Frequently asked questions