CSS Gradients Explained: Linear, Radial, Conic and 20 Examples

A CSS gradient is an image the browser draws from a list of colours, so you can use it anywhere an image goes, usually in background. There are three kinds: linear-gradient() blends along a straight line, radial-gradient() spreads out from a point, and conic-gradient() sweeps around a point like a clock hand. Each has a repeating version for stripes and patterns.

The quickest start is background: linear-gradient(135deg, #6d48f5, #ec4899);, which is what the free CSS gradient generator gives you by default. Below are the rules for directions and colour stops, and about 20 examples we tested in Chrome, so every line here is valid CSS you can paste.

Linear gradients: the basic syntax

A linear gradient takes an optional direction, then two or more colours separated by commas:

background: linear-gradient(#0ea5e9, #6d48f5);

With no direction it runs from top to bottom. Add a direction before the first colour, followed by a comma:

background: linear-gradient(to right, #ff9933, #ffffff, #138808);

Two small habits help. Write a plain background-color first as a fallback, in case the gradient line has a typo and gets ignored. And remember that background is a shorthand: it resets any background colour or image set earlier in the same rule. If you only want to set the gradient, use background-image.

Angles and directions

An angle says which way the colours travel. 0deg points up and the angle turns clockwise:

The corner keywords are not fixed angles. to bottom right adjusts to the element's shape so the halfway colour runs exactly between the other two corners. On a 400×100 banner it rendered identically to 165.96deg, nearly straight down, with the colour bands lying along the shallow diagonal. 135deg, on the other hand, always runs at exactly 135°, whatever the shape. Use the angle when gradients on cards of different sizes must match.

Two mistakes the browser silently rejects, so you see no gradient at all: a missing comma after the direction (linear-gradient(135deg #6d48f5, #ec4899)) and mixing the two forms (to 45deg). Both failed our validity test.

Colour stops: positions, hard edges and hints

Each colour can take a position, as a percentage or a length. Without positions, colours are spread evenly. Positions let you control where blending happens:

• Hard edge: give two colours the same position and there is no blend. A 70% progress bar: linear-gradient(to right, #16a34a 70%, #e5e7eb 70%).
• Stripes: a colour can take two positions, a start and an end. Three flag-style bands: linear-gradient(#ff9933 33.33%, #ffffff 33.33% 66.67%, #138808 66.67%).
• Colour hint: a bare percentage between two colours moves the halfway point of the blend. linear-gradient(to right, #0ea5e9, 25%, #6d48f5) reaches the midpoint colour a quarter of the way across.
• Fading to transparent: to darken the bottom of a photo so white text shows up on it, layer a gradient over the image: background: linear-gradient(to bottom, rgb(0 0 0 / 0) 40%, rgb(0 0 0 / 0.75)), url("hero.jpg") center / cover;. The first layer listed is drawn on top.

Two far-apart colours can blend through a dull grey in the middle. In our test, linear-gradient(to right, #0ea5e9, #f97316) (sky blue to orange) was a muddy grey-green at the halfway point, rgb(131, 140, 127). Either add a middle colour yourself, or ask the browser to blend in a different colour space: with linear-gradient(to right in oklch, #0ea5e9, #f97316) the same point was a bright pink-purple, rgb(204, 117, 216), because the blend travels round the colour wheel instead of through grey. Older browsers ignore the in oklch line, so put a plain version on the line above it.

Radial gradients

A radial gradient starts at a centre point and spreads outwards. By default the shape is an ellipse that fits the box, centred, reaching the farthest corner.

• A round glow: radial-gradient(circle, #fde68a, #f59e0b)
• Moved to a corner: radial-gradient(circle at top left, #e0f2fe, #ffffff 60%)
• A soft spot that fades out at the nearest edge: radial-gradient(ellipse closest-side, #6d48f5, transparent)
• An exact size and position: radial-gradient(circle 80px at 30% 40%, #ec4899, #6d48f5)

The size keywords are closest-side, closest-corner, farthest-side and farthest-corner (the default). They decide where the last colour is reached.

Conic gradients

A conic gradient changes colour as you go round a centre point, starting at the top. Positions are percentages of the full turn or angles, which makes it ideal for pie charts and colour wheels:

• A pie chart, 40/35/25: background: conic-gradient(#6d48f5 0% 40%, #ec4899 40% 75%, #e5e7eb 75% 100%); border-radius: 50%;
• A colour wheel: conic-gradient(red, yellow, lime, aqua, blue, magenta, red)
• Starting angle and centre: conic-gradient(from 90deg at 50% 50%, #6d48f5, #ec4899, #6d48f5)

Repeat the first colour at the end when you want a smooth join at the top. A CSS pie chart is only a picture, so screen readers get nothing from it; put the numbers in text next to it as well.

Repeating gradients and patterns

The repeating versions take the stops you give and tile them to fill the box. For linear and radial patterns, pixel lengths are easiest to reason about:

• Diagonal stripes: repeating-linear-gradient(45deg, #f3f4f6 0 10px, #e5e7eb 10px 20px)
• Target rings: repeating-radial-gradient(circle, #6d48f5 0 4px, #ede9fe 4px 12px)
• A transparency checkerboard: background: repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 0 0 / 24px 24px;

In the checkerboard, a second position of 0% means "start where the previous colour ended", and the / 24px 24px sets the size of each tile.

Gradient text

To fill text with a gradient, clip the background to the letters and make the text colour transparent:

background: linear-gradient(90deg, #6d48f5, #ec4899);
-webkit-background-clip: text;
background-clip: text;
color: transparent;

Keep the -webkit- line: Chrome and Edge accepted the unprefixed version only from version 120. Use gradient text for large headings, not body copy, and check the contrast at both ends.

Browser support

Linear and radial gradients have worked in every browser for over a decade. The newer features need a recent version, as listed in MDN's compatibility data (October 2026):

Samsung Internet, the default browser on Samsung phones, has supported conic gradients since version 10. Almost every browser in use today handles everything above; the colour-space syntax is the newest, so it is the one worth a fallback line.

Keep text readable on a gradient

Text on a gradient has to pass contrast against every colour behind it, not just the one you notice. Check the text colour against each colour stop and against the midpoint, and go by the worst result. WCAG asks for at least 4.5:1 for normal text and 3:1 for large text.

We checked white text on a sky-blue-to-purple hero, linear-gradient(to right, #0ea5e9, #6d48f5), with the colour contrast checker:

The left side fails even the 3:1 large-text level. Darkening only the start colour to #0369a1 fixed it: 5.93:1 at the start, 6.07:1 at the new midpoint (#3859cb) and still 5.39:1 at the end. To find the midpoint of a two-colour gradient, average the red, green and blue values of the two end colours, or pick the colour from the preview. Our guide to colour contrast and the WCAG rules explains the ratios in full.

Using the site's gradient generator

The CSS gradient generator makes two-colour linear gradients. Enter a start and end colour as hex codes (three or six digits, with or without #) and pick one of four directions: Diagonal ↘ (135deg), Left → Right (to right), Top → Bottom (to bottom) or Diagonal ↗ (to top right). It shows a preview strip and a line such as background: linear-gradient(to right, #ff6600, #0ea5e9);, normalising f60 to #ff6600.

It doesn't accept colour names, eight-digit hex with transparency, a third colour, custom angles, or radial and conic types. Generate the base line, then edit it by hand with the examples above. To choose colours that sit well together first, use the colour palette generator and our guide to HEX, RGB and HSL colour codes.

Frequently asked questions

Why does my body gradient repeat in stripes?

On a short page the gradient is sized to the content, not the window, and then tiled. We saw a black-to-white gradient on a one-line page repeat as dozens of thin bands. Add html { min-height: 100%; } and it stretches to fill the screen.

Are CSS gradients better than gradient images?

Usually. The browser draws them, so there's no file to download, they stay sharp at any screen density, and you can change a colour in one line. Use an image only for effects CSS can't produce, such as grain or a photo.

Can I animate a gradient?

Colour stops don't animate directly. Common workarounds: make the background larger than the element and animate background-position, or register the colours as custom properties with @property (Chrome 85, Firefox 128, Safari 16.4) and animate those. Respect users who turn on reduced motion.

How do I make a gradient border?

Give the element a transparent border and two background layers: background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #6d48f5, #ec4899) border-box; border: 3px solid transparent;. This keeps rounded corners, unlike border-image.

What is the difference between background and background-image for gradients?

Both work. background also resets colour, size, position and repeat, so it can wipe out values set earlier. background-image changes only the image.

Sources: MDN browser compatibility data 8.1.6 (October 2026); W3C WCAG 2.2, Success Criterion 1.4.3; all examples checked with CSS.supports() and rendered in Chrome 151; contrast ratios from the site's contrast checker.