CSS gradient generator
Generated in your browser · nothing is uploaded
Builds a linear-gradient, radial-gradient or conic-gradient with as many colour stops as you want, previewed live, and gives you the CSS that produced exactly what you are looking at.
How to use the css gradient generator
The angle in a CSS linear gradient is not the one most people expect. 0deg points up and the angle turns clockwise, so 90deg runs left to right and 180deg runs top to bottom. The opposite convention governs school trigonometry and SVG, both of which start at three o’clock and turn anticlockwise, and it is the usual reason a gradient copied out of a design tool arrives mirrored. The radial mode ignores the angle entirely, because a gradient radiating from the centre has no direction to rotate, and the conic mode uses it as a starting point rather than a direction: conic-gradient(from 135deg, …) sets where the sweep begins.
Interpolation is the part that changes how a gradient looks rather than where it points. A blend between two colours is a straight line drawn through a colour space, and by default that space is sRGB. Draw a line from blue to yellow in sRGB and it passes exactly through the middle grey, which is why that particular blend always looks dirty. Naming a better space fixes it: linear-gradient(135deg in oklch, blue, yellow) holds the lightness steady and travels through the colours a person would predict. The keyword sits inside the same first argument as the angle, with no comma between them, and it can appear on its own when there is no angle. Nothing here emits it, so it is one word to add after copying.
For the polar spaces there is a second control, because a hue can be reached going either way round the wheel. Adding shorter hue, longer hue, increasing hue or decreasing hue after the space picks the route; shorter hue is the default and takes the smaller arc. longer hue on two nearby colours sends the blend the long way round through everything else, which is how a rainbow sweep gets made from two stops.
Two details catch people out. A gradient with two stops at the same position does not blend at all: it changes abruptly, and that hard edge is how CSS-only stripes and split backgrounds are made without an image. And fading to the transparent keyword is fading to transparent black, since that is how the keyword is defined. Browsers premultiply alpha in gradients now, which hides most of the resulting grey cast, but naming your own colour at zero alpha removes the question entirely.
What people use it for
- Backing a hero section without shipping an image file
- Making a striped or two-tone panel out of stops at the same position
- Fixing a gradient that came out mirrored after a design-tool hand-off
- Getting a blue-to-yellow blend that does not pass through grey
- Building a conic gradient for a pie chart or a colour wheel
- Fading an image out at its edge without a mask
- Reading back the exact CSS for a gradient tuned by eye
Questions
In CSS 0deg points up and the angle turns clockwise, so 90deg runs left to right. Maths and SVG both start at three o’clock and turn the other way, which is where the mismatch comes from.
Because the blend is a straight line through sRGB, and that line passes through middle grey. Adding the keyword in oklch or in oklab after the angle turns the midpoint into a colour rather than a smudge.
Inside the same first argument as the angle, with no comma: linear-gradient(135deg in oklch, blue, yellow). With no angle it stands alone: linear-gradient(in oklch, blue, yellow).
In a polar space, yes. One of four keywords goes after the space name: shorter hue, longer hue, increasing hue or decreasing hue. The default is the shorter arc, and the longer one is how two stops produce a full rainbow.
Put two stops at the same position. The colour switches abruptly at that point, which is the standard way to build stripes, split panels and flags with no image file.
The transparent keyword means transparent black, so the blend heads toward black as it fades. Use the same colour at zero alpha instead, and the fade stays in its own hue.
No. This emits a radial gradient centred on the element, so there is no direction for an angle to describe. In conic mode the angle sets where the sweep starts rather than which way it points.
Because being explicit makes the copied CSS say exactly what the preview did. Stops are also sorted by position before being written, since a stop list out of order is valid CSS but confusing to read.
Tiling the stop list over and over across the element, which gives you repeating stripes, hatching or a ruler from a couple of stops rather than dozens.
Not directly, because a gradient is not an interpolatable value. Animate background-position across an oversized gradient, or register a custom property with @property, typed as a colour, and animate that instead.
Eight bits per channel over a large area is not always enough to hide the steps. Interpolating in oklab helps, and a very subtle noise overlay on top hides the rest.
Yes. The preview element is styled with the declaration shown below it, unchanged, so anything you can see is in the text you copy.