CSS Gradient Generator - Linear, Radial and Conic with Live Preview and Copy-Ready CSS
Pick linear, radial or conic, set the angle or centre, and add colour stops with positions and opacity.
Maintained by Hirantha Sandaruwan Lakshan. Updated 13 October 2026.
About this tool
The preview updates as you type and the CSS is ready to copy: background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%). There are presets, a repeating option, and the newer colour interpolation syntax such as in oklch, clearly marked because older browsers ignore it. Only modern, unprefixed CSS is produced.
How it works
A CSS gradient is an image made by the browser, so it goes anywhere an image can, most often background or background-image. linear-gradient() blends colours along a line. Its angle 0deg points up, 90deg points right, 180deg points down and 270deg points left, and the keyword form is a shortcut: "to top" is 0deg, "to right" is 90deg, "to bottom" is 180deg (the default) and "to left" is 270deg. radial-gradient() blends outward from a centre as a circle or an ellipse, whose size can be closest-side, closest-corner, farthest-side or farthest-corner (the default). conic-gradient() sweeps colours round a centre point like the hands of a clock, starting at the top unless you set a start angle.
Each colour stop is a colour with an optional position. CSS fills in positions you leave out: the first stop is 0% and the last is 100%, and stops without a position are spaced evenly. A stop positioned before an earlier one is raised to the largest earlier position. Two stops at the same position leave no distance to blend across, so the colour changes in one step: that is how you make a hard edge. The fix-up rules are defined in CSS Images Module Level 3, section 3.4.3. This tool can keep your stops in ascending order in the output, and warns when they are not. Up and Down swap colours between stops and keep the positions in place.
Transparency works through the opacity of a stop. A stop that is partly transparent is written as rgba(), and a black stop that is fully transparent is written as transparent. To fade a colour out, give the last stop the same colour at 0% opacity, as in the Fade to transparent preset. Current browsers blend with premultiplied alpha, so a fade from a colour to transparent does not turn grey in the middle.
The colour interpolation option adds a clause such as in oklch to the function, which changes the colour space the browser blends in. It can give smoother, more even transitions than the default for some pairs of colours, and for hue-based spaces (hsl, lch, oklch) you can choose the path round the colour wheel: shorter is the default and longer goes the other way. This syntax is newer than the rest: according to the MDN browser compatibility data (release 8.1.5, read on 2026-10-13) it works from Chrome and Edge 111, Safari 16.2 and Firefox 127. A browser that does not know it drops the whole declaration, so put a plain background before it as a fallback. The tool marks it and checks whether your own browser can draw it. A repeating gradient repeats the span between its first and last stop, so the last stop must be below 100% for the pattern to show.
Worked examples
A two-colour sunset
linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%) runs from coral at the top left to peach at the bottom right. 135deg is a diagonal that points toward the bottom right, halfway between right (90deg) and down (180deg).
Fading a colour to nothing
linear-gradient(180deg, #3b82f6 0%, rgba(59, 130, 246, 0) 100%) starts as solid blue at the top and ends fully transparent at the bottom, so whatever is behind the element shows through. It is the usual way to fade an image into the page.
Hard-edged stripes with a repeating gradient
repeating-linear-gradient(45deg, #f97316 0%, #f97316 10%, #ffedd5 10%, #ffedd5 20%) puts two stops at the same position, 10%, so there is no blend, only an edge. The pattern is 20% long and repeats along the diagonal, making orange and cream stripes each 10% of the length.
A colour wheel
conic-gradient(from 0deg, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%) sweeps the six hues once round the circle and ends on the colour it started with, so the seam is invisible.
The three gradient functions and their repeating forms
| Function | Direction or centre | Stop positions are measured along | Repeating form |
|---|---|---|---|
| linear-gradient() | An angle or a to side or corner keyword | The gradient line, 0% to 100% | repeating-linear-gradient() |
| radial-gradient() | Shape, size and at position (default: ellipse, farthest-corner, center) | The radius from the centre to the edge of the shape | repeating-radial-gradient() |
| conic-gradient() | from angle and at position (default: from 0deg, center) | The angle round the centre, 0deg to 360deg or 0% to 100% | repeating-conic-gradient() |
Frequently asked questions
How do I fade a colour to transparent?
Give the last stop the same colour with its opacity set to 0, for example linear-gradient(#3b82f6, rgba(59, 130, 246, 0)). Current browsers blend with premultiplied alpha, so even the keyword transparent does not go grey, but writing the colour out is the safe habit.
What do 0deg, 90deg and 180deg mean in linear-gradient()?
They are directions, measured clockwise from the top. 0deg points up, so the first colour is at the bottom. 90deg points right, 180deg points down (the default) and 270deg points left. "to bottom right" aims at the corner and adjusts the angle to the shape of the box.
How do I make a hard edge instead of a blend?
Put two stops at the same position, for example red 50%, blue 50%. There is no distance between them to blend across, so the colour changes in one step. Out-of-order stops do the same thing, because the browser raises the later stop to the earlier position.
Why does my repeating gradient show only one gradient?
A repeating gradient repeats the distance between its first and last stop. If the first stop is at 0% and the last is at 100%, that distance is the whole box and nothing repeats. Move the last stop to, say, 20% and the pattern repeats five times along the line.
What does "in oklch" do, and can I use it today?
It tells the browser to blend the colours in the OKLCH colour space instead of its default, which can give more even-looking mixes between colours that are far apart on the wheel. It works in Chrome and Edge 111 or later, Safari 16.2 or later and Firefox 127 or later. Add a plain background line before it for older browsers.
Do I need -webkit- or -moz- prefixes?
No. The unprefixed linear-gradient() and radial-gradient() have worked in every major browser for a long time (Chrome 26, Edge 12, Firefox 16 and Safari 7 and later), and conic-gradient() since Chrome 69, Firefox 83 and Safari 12.1. This tool produces unprefixed CSS only.
How many colour stops can I use?
The CSS specification does not set a limit. This tool allows up to ten so the form stays usable. If you need more, copy the CSS and add stops by hand in the same pattern: a colour, a space and a percentage.
Sources & references
Updated Oct 13, 2026