CSS Gradient Generator

A CSS gradient is a smooth transition between two or more colours, drawn by the browser rather than downloaded as a picture. It is a value for background-image, which means it has no resolution, no file size and no fixed dimensions — it is painted across whatever box it is applied to, at whatever size that box happens to be, and repainted when the box changes.

1background: linear-gradient(135deg, #4f46e5, #06b6d4);

That single line replaces an exported image, its retina variant, the request that fetches it and the resolution decisions that go with it. It also stays sharp at any size, which no raster image does.

Every gradient is made of the same three parts: a kind that says how the colour travels, a geometry that says where, and a list of colour stops that says what. The rest of this page is those three things in detail.

A visual editor for a syntax that is easy to read and awkward to write blind. Nothing about linear-gradient() is hard, but getting from a colour in your head to the right angle, the right stop percentages and the right notation is a loop of edit, save, look, adjust — and each pass costs a few seconds and some attention.

A generator collapses that loop. What it is actually buying you:

• The angle problem disappears. CSS measures gradient angles clockwise from north, which is the opposite of the mathematical convention. Converting by hand is where gradients come out 90° off; dragging a dial is where they do not.
• Stop positions become visible. Deciding that a colour belongs at 38% is a thing you do by eye, not by arithmetic.
• Notation stops mattering. Paste a colour in any form — hex, rgb, hsl, a name — and it converts. Alpha comes through.
• You see it where it will live. A gradient that looks striking across a hero can be unreadable behind a button, and the only way to know is to look at both.
• Contrast gets checked.A gradient has a different contrast ratio at every point, so “is this accessible” is not a question anyone can answer by looking.

Everything on this page runs in your browser. No colour, gradient or export ever leaves the machine.

Three, and the difference between them is the shape of the line the colours are laid along.

Linear

The colours travel in a straight line across the box. The one you want nine times in ten: hero backgrounds, buttons, card headers, anything that wants a sense of direction.

Radial

The colours spread outwards from a point, in a circle or an ellipse. Good for a spotlight, a glow behind a subject, or a vignette. It has no angle — it has a shape, a size and a centre instead.

Conic

The colours sweep around a point like the face of a clock. This is how a pie chart gets drawn in one declaration, and how a colour wheel, a progress ring or a conical shine on a button gets made without an image.

All three have a repeating variant that tiles the stop sequence rather than holding the end colours, which is how stripes, checks and starbursts are made.

1. Pick the type. Linear for direction, radial for a glow, conic for a sweep. Switching between them here keeps every setting, so comparing costs nothing.
2. Choose your colours. Click a stop and set it with the picker, or paste one in any notation. Two colours is a gradient; more than four usually reads as bands.
3. Place the stops. Drag the handles on the bar, or type exact percentages. Click the bar to add a stop where you clicked.
4. Set the geometry. An angle or a direction keyword for linear, a shape and centre for radial, a start angle for conic.
5. Look at it in context. The preview switcher puts the same gradient behind a card, a button and text. The button is usually the one that catches a problem.
6. Check the contrast if anything will sit on top of it. The Analysis tab shows the worst point rather than an average.
7. Copy the form you need. A declaration, a custom property, SCSS, Tailwind or JSON — each is a different place the gradient ends up.

A linear gradient travels along a line, and everything about it is a question of where that line points and what sits along it.

Direction and angle

Two ways to say the same thing, and they are not interchangeable. A keyword — to right, to bottom left — points at that side or corner whatever shape the box is. An angle is fixed. In a square they agree; in a wide banner to bottom right follows the diagonal and 135deg does not.

1background: linear-gradient(to right, #4f46e5, #06b6d4);2background: linear-gradient(135deg, #4f46e5, #06b6d4);3background: linear-gradient(#4f46e5, #06b6d4);  /* defaults to 'to bottom' */

The angle is measured clockwise from north. 0° points up, 90° points right, 180° points down. That is the opposite convention from mathematics, where angles run anticlockwise from east — and it is why gradients converted by hand so often come out exactly 90° wrong. The angle is the direction the gradient travels, not where it comes from.

Colour stops and position

Each stop names a colour and, optionally, where along the line it is at full strength. Leave the positions out and the browser spreads them evenly; write them and you control the pacing.

1background: linear-gradient(2  to right,3  #4f46e5 0%,4  #06b6d4 50%,5  #22c55e 100%6);

This tool always writes the positions out. An implicit position is shorter and means something different the moment another stop is added, which is exactly when you least want the rest of the gradient to move.

Fading to nothing

A linear gradient to a transparent colour is how a scrim over a photograph is made — the gradient darkens the bottom of the image so the caption reads, and disappears at the top.

1background: linear-gradient(2  180deg,3  rgba(15, 23, 42, 0.8) 0%,4  rgba(15, 23, 42, 0) 100%5);

Note that both ends name the same colour. Fading to the keyword transparent works in current browsers, and in older ones dragged the fade through black, because transparent is a transparent black. Naming the colour at both ends has always been safe.

A radial gradient spreads outwards from a point. It has no angle; it has three other things instead.

Shape

circle stays round whatever the box, so in a wide banner it covers the height and overflows the width. ellipsestretches to match the box’s proportions, which is the default and usually what you want for a background.

Size

Four keywords, each answering “the last stop reaches which part of the box?”

• farthest-corner — the default, and the only one that guarantees the gradient covers the whole box.
• farthest-side — reaches the furthest edge; the corners lie beyond the last stop and take its colour flat.
• closest-side — reaches the nearest edge. A tight circle with a large flat surround.
• closest-corner — between the two closest options.

Position

Where the centre sits, as a pair of percentages or a keyword. Moving it off centre is what turns a symmetrical blob into a light source.

1background: radial-gradient(circle at center, #4f46e5, #06b6d4);2 3background: radial-gradient(4  ellipse closest-side at 30% 30%,5  #fbbf24,6  #dc26267);

A conic gradient sweeps around a point rather than outwards from it. The colours are laid around a circle, like the numbers on a clock face.

Starting angle and position

from says where the sweep begins, measured clockwise from north like every other CSS angle. at says where the centre is. Both default sensibly: from 0deg at center.

1background: conic-gradient(2  from 90deg,3  #4f46e5,4  #06b6d4,5  #22c55e6);

What it is actually for

• Pie and donut charts. Hard stops at the right percentages give you segments; a radial mask over the middle makes it a donut. No library, no canvas.
• Progress rings. Two stops at the same percentage produce a hard edge that sweeps as the number changes.
• Colour wheels. The full hue circle in one declaration, which is what the transparency chequerboard on this page is built from.
• Conical shine. A subtle sweep across a button or a card edge, the way a metallic surface catches light.

Conic gradients arrived after the vendor-prefix era, so they never had a prefix and are supported everywhere current. The one gap: SVG has no conic gradient, so exporting one as SVG can only approximate it — the PNG export is faithful because the browser paints it.

A colour stop is a colour and a position: this colour, at full strength, here. Everything between two stops is interpolated, and everything before the first or after the last is held flat.

1/* even — each colour gets a third of the run */2linear-gradient(90deg, #4f46e5 0%, #06b6d4 50%, #22c55e 100%)3 4/* weighted — indigo dominates, green is a hint at the end */5linear-gradient(90deg, #4f46e5 0%, #06b6d4 80%, #22c55e 100%)

Two stops at the same position make a hard edge

There is no gap for the browser to blend across, so the colour changes instantly. That is not a bug to work around — it is how stripes, two-tone splits and pie segments are made.

1background: repeating-linear-gradient(2  45deg,3  #0f172a 0%,4  #0f172a 10%,5  #1e293b 10%,6  #1e293b 20%7);

Implicit positions are a trap

Leave the percentages out and the browser spreads the stops evenly — which is fine until you add a fourth colour and all three of the others move. Writing the positions costs a few characters and means the gradient you built stays the gradient you have.

Alpha interpolates too

A stop can be translucent, and the transition blends the transparency along with the colour. The subtlety worth knowing: a correct implementation premultiplies alpha before blending. Without that, fading red to a transparent colour drags the midpoint through whatever RGB the transparent stop carries — usually black — and the fade goes grey. This tool premultiplies, so red fading to nothing stays red the whole way.

Contrast is measured at the worst point, not on average

A gradient has a different contrast ratio everywhere along it. If white text needs 4.5:1 it needs 4.5:1 at every point the text touches, and an average hides exactly the spot where a word disappears. The practical consequence: a gradient with text on it should stay within one lightness band rather than running light to dark. The colour picker checks a single pair against the WCAG thresholds, which is the test to run on the darkest and lightest points of the blend.

Keep text off the gradient where you can

A solid panel over the gradient, or a scrim between the two, solves the problem outright and costs one extra element. Gradient text — clipped with background-clip — is harder again, because thin letterforms need far more contrast than a filled shape does.

Smooth transitions come from close colours

Two hues far apart on the wheel pass through everything between them, and in sRGB that route usually goes somewhere muddy — blue to yellow travels through grey. Either keep the hues close, or add a stop at the midpoint to steer the path through a colour you chose — the colour converter will give you the HSL reading of each stop, which is where a hue distance is easiest to see.

Two or three colours, rarely more

Past about four stops a gradient stops reading as a blend and starts reading as bands. If the design needs more colour than that, two stacked gradients with different opacities usually looks better than one with six stops.

Performance: it is the animation that costs

A static gradient is painted once and is cheaper than downloading the equivalent image. Animating the stops is not — that forces a repaint every frame. Cross-fade the opacity of two stacked layers instead, which the compositor can do on the GPU.

Compatibility: no prefixes needed

Linear and radial gradients have been unprefixed since 2013, and conic gradients never had a prefix. Emitting -webkit- copies today adds bytes and implies a support problem that does not exist. The toggle is there for house styles that still demand it, and off by default.

Name it once

The moment a gradient appears in two places, put it in a custom property. It becomes one thing to change rather than two to keep in step — and once the rule is pasted into a stylesheet, the CSS formatter will re-indent it to match the rest of the file.

1:root {2  --gradient-brand: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);3}4 5.hero { background: var(--gradient-brand); }6.button { background: var(--gradient-brand); }

A gradient is more interesting than a flat colour and harder to put content on. That trade is the whole decision.

Use a gradient when the surface is mostly decorative

Heroes, section dividers, card headers, empty states, call-to-action buttons, splash screens. Surfaces where the job is to be memorable and there is little or no text to protect. Small elements are especially good candidates, because the whole gradient is visible at once and reads as one thing.

Use a solid colour when the surface holds content

Body text, forms, tables, dashboards, anything dense. Contrast that changes as your eye travels is tiring in a way people do not consciously notice and do notice: they read more slowly. A flat background is one decision the reader never has to make.

The middle path

Gradient behind, solid on top. A gradient page background with white cards over it gives the atmosphere without the cost, and is why nearly every marketing site is built that way.

One more argument for solid: a gradient is a commitment. Changing a brand colour means finding every gradient it appears in and rebalancing the stops, where a flat colour is one value. If the colour is not settled, flat is the reversible choice.

The same three declarations, doing rather different jobs. What changes between them is mostly how much contrast the surface has to preserve.