CSS gradient generator
Pick a type, add colour stops, drag the angle. The preview and the CSS update instantly, and the exact background: declaration is ready to copy the moment it looks right.
Build a gradient
Colour stops
Presets
How the three gradient types work
linear-gradient() — a straight band of colour
Colour travels along a single straight line across the box, at whatever angle you set. The angle follows compass/clock convention, not mathematical convention: 0deg points straight up and the angle increases clockwise, so 90deg points right, 180deg points down and 270deg points left. This trips people up constantly because it is the opposite rotation direction from standard trigonometry.
radial-gradient() — colour spreading from a point
Colour spreads outward from a centre point instead of along a line. Ellipse, the default shape, stretches to match the box's own proportions, so a wide banner gets a wide oval of colour. Circle stays round no matter what shape the box is. The centre can sit anywhere — center, a corner, an edge — which is what makes a radial gradient work as a spotlight or vignette rather than only a centred glow.
conic-gradient() — colour swept around a point
Instead of spreading outward, colour sweeps around a centre point like the hand of a clock, which is exactly what makes it the only one of the three that can produce a convincing colour wheel or pie chart without an image. The starting angle sets where 0% of the sweep begins; the sweep always runs clockwise back to that same angle at 100%.
Colour-stop positions and hard stops
Each colour stop is a position (0–100%) plus a colour. Between two stops the browser blends smoothly through the colour space by default. Give two adjacent stops the same position and the blend collapses to nothing — the colour snaps instantly from one to the other, which is how the striped preset below is built: four stops, but only two distinct positions.
| Function | Skeleton | Notes |
|---|---|---|
| linear-gradient() | linear-gradient(90deg, #f00 0%, #00f 100%) | Angle first, then stops in any order — this tool always writes them sorted by position. |
| radial-gradient() | radial-gradient(circle at center, #f00 0%, #00f 100%) | Shape and position come before the comma, together with at. |
| conic-gradient() | conic-gradient(from 0deg at center, #f00 0%, #00f 100%) | The starting angle needs the word from; position uses at, same as radial. |
Browser support
linear-gradient() and radial-gradient() have been supported everywhere for well over a decade and need no qualification. conic-gradient() arrived later but is now equally safe to ship:
| Browser | Supported since |
|---|---|
| Chrome / Edge | 69 / 79 |
| Firefox | 83 |
| Safari | 12.1 |
| Safari on iOS | 12.2 |
That covers roughly 94% of global browser traffic at the time of writing, with the shortfall almost entirely Internet Explorer, which never implemented any of the three functions. If a project still has to support IE, fall back to a plain background colour — an unsupported gradient function is simply ignored, so put a solid background-color declaration before the gradient one and older browsers use that instead.
Text on a gradient — check contrast first
A gradient's contrast against overlaid text is not one number — it changes across the gradient's width, so a pair of colours that reads clearly at one edge can fail badly at the other. Sample the colour behind the darkest and lightest part of the text separately and check both with the contrast checker. If the gradient is genuinely busy, a solid or semi-transparent scrim behind the text is more reliable than trying to pick a "safe" spot in the blend.
Worked examples
A diagonal two-colour blend
background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
Two stops, one angle. This is the shape of the large majority of gradients actually shipped on the web — a subtle diagonal wash behind a hero section or a button.
A conic colour wheel
background: conic-gradient(from 0deg at center,
#ff0000 0%, #ffff00 17%, #00ff00 33%,
#00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
Seven stops sweeping the full hue circle back to red at 100% — the only one of the three gradient types that can do this without a raster image.
Hard stops for stripes
background: linear-gradient(45deg,
#1c2430 0%, #1c2430 50%, #3a4a5e 50%, #3a4a5e 100%);
Four stops but only two positions — 0/50 and 50/100 — so each half renders as a flat colour with a knife-edge between them instead of a blend.
Use cases & limitations
Where a CSS gradient is the right tool
- Hero banners and section backgrounds where a photo would add weight and licensing risk that a two-line CSS rule avoids entirely.
- Buttons, badges and cards that want a subtle depth cue without a shadow.
- Loading skeletons and placeholders, animated by moving
background-positionrather than the gradient itself. - Data visualisation legends — a conic gradient is the fastest way to draw an accurate hue wheel or a pie-style proportion indicator.
- Dark-mode-safe decoration — a gradient defined in your own palette adapts with a media query; a baked photo does not.
What it will not do for you
- Photographic texture. A gradient is smooth colour, not noise, grain or detail. It cannot substitute for a real image where texture is the point.
- Smooth animation between two gradients, without extra work — see the FAQ below. A plain, static gradient stays the simplest and safest choice.
- Guaranteed text contrast. The gradient itself carries no accessibility guarantee; that has to be checked separately, against the specific colours under the specific text.
- Print colour accuracy. Screen gradients are defined in sRGB; a printed reproduction of the same hex values will shift depending on the print process.
Frequently asked questions
Which way does the angle go in a linear gradient?
0deg points straight up and the angle increases clockwise, so 90deg points right, 180deg points down and 270deg points left — the same convention as a compass bearing or a clock face, not the mathematical convention of 0deg pointing right and increasing counter-clockwise. The first colour stop sits at the start of the gradient line and the last sits at the end, so 0deg paints the first colour at the bottom of the box and the last colour at the top.
How do I make a hard edge instead of a smooth blend?
Give two colour stops the same position. Anywhere the gradient still has room to fade, it is because two adjacent stops are at different percentages; set both to, say, 50% and the colour snaps from one to the other with no transition. Stacking several same-position pairs is how striped and pie-chart-style gradients are built without an image.
Is conic-gradient() safe to use in production yet?
Yes. It has shipped in Chrome since version 69, Firefox since 83, Safari since 12.1 and Edge since 79 — all several years old at this point — and sits at roughly 94% global browser support. The practical exception is Internet Explorer, which supports none of the three gradient functions and can be ignored for any site that has already dropped it.
What is the difference between circle and ellipse for a radial gradient?
Ellipse, the default, stretches to match the aspect ratio of the box it fills, so a wide box gets a wide oval. Circle stays perfectly round regardless of the box's proportions. Use circle when the gradient represents something inherently round — a spotlight, a radar sweep, a badge — and leave ellipse for a soft background wash that should fill the corners evenly.
Can I animate a CSS gradient smoothly?
Not by default. background-image — which is what a gradient value is — is not on the list of properties browsers interpolate, so transitioning between two gradients jumps instantly instead of blending. The common workarounds are animating background-position or background-size on an oversized gradient, cross-fading two absolutely positioned layers with opacity (which does interpolate), or registering the custom properties feeding the gradient with @property so the browser knows they are animatable. All three add real complexity; a plain gradient with no animation remains the simplest and most compatible choice.
Why does my smooth two-colour gradient show visible bands?
Colour banding, and it is a display and colour-depth issue rather than a mistake in the gradient itself. A large flat colour transition only has 256 discrete steps per channel to work with, and a wide, low-contrast gradient can spread those steps far enough apart that the eye perceives hard edges, especially on a scaled-down display or projector. Adding an extra colour stop partway through, or nudging both endpoints slightly further apart in luminance, spreads the transition across more visual space and reduces the effect; it is not something this tool's output can prevent on its own account.
Is it safe to put text directly on top of a gradient?
Only if you check it. A gradient's contrast against text changes across its width — a pair of colours that reads fine at one edge can fail badly at the other — so a single spot check is not enough. Sample the colour under the darkest and lightest part of the text and run both through a contrast checker, or add a solid or semi-transparent scrim behind the text so the background stops varying.
Does this tool store or upload the gradient I build?
No. Building and previewing a gradient runs entirely in your browser — the colours and positions you choose never leave your device. The generated CSS only exists on the page in front of you until you copy it somewhere yourself.