CSS Gradient Builder
Builds linear, radial and conic gradients with draggable stops and emits the CSS, in sRGB or OKLCH.
Builds a linear, radial or conic gradient and emits the CSS, including the `in oklch` interpolation clause that decides what happens between the stops. The same stops are always drawn a second time in sRGB underneath, because the argument for interpolating in a perceptual space is a visual one and four centimetres of gradient makes it faster than a paragraph does.
The same stops in sRGB, for comparison. If the middle of this strip looks washed out next to the one above, that is the interpolation space doing its job — a straight line through the sRGB cube between two opposing hues passes close to the neutral axis.
Travels round the hue wheel, so the midpoint keeps its chroma. The default, and the reason CSS grew the syntax.
Stops
- 0%
- 100%
Presets
CSS
background-image: linear-gradient(135deg in oklch, #5b6cff 0%, #22d3ee 100%);The in oklch clause needs a browser from 2023 or later. Older engines drop the whole declaration rather than falling back, so pair it with a plain sRGB gradient in a preceding declaration if you support them.
How to use it
Pick the type, then the angle
Linear travels in a straight line, radial spreads from a point, conic sweeps around one. The angle applies to linear and conic; radial takes a shape and a centre instead.
Place the stops
Each stop has a colour and a position from 0 to 100%. Two is the minimum; adding one redistributes the positions evenly, after which you can move them. The presets are a quick way to see how three or four stops behave.
Choose the interpolation space — this is the real decision
OKLCH keeps chroma through the middle, which is what stops blue-to-yellow going grey halfway. OKLab takes the shortest perceptual path and is right when the two stops are close in hue. sRGB is the legacy behaviour, and worth choosing deliberately if you need old browsers to get the same result as new ones.
In a polar space, decide which way round the wheel
OKLCH, LCH and HSL are polar, so there are two arcs between any two hues. `shorter` is the default and usually what you want; `longer` turns a two-stop gradient into a rainbow, which is occasionally exactly the effect.
Copy the value or the whole declaration
The value goes into an existing `background-image`; the declaration is ready to paste on its own.
Common questions
Will `in oklch` work in every browser?
No. It needs an engine from 2023 or later, and an older one drops the entire declaration rather than falling back to sRGB — there is no partial support here. Put a plain sRGB gradient in a preceding declaration and let the newer engine override it, which is the standard CSS cascade fallback and costs one extra line.
Why does the sRGB strip go grey in the middle?
Because interpolating in sRGB draws a straight line through the colour cube, and the line between two roughly opposing hues passes close to the neutral axis. Nothing is wrong with the gradient — it is doing exactly what the numbers say, and the numbers were never about how colour looks.
My gradient has visible bands across it. Can this fix that?
Not directly. Banding is the 8-bit output quantising a slow ramp over a large area, and no choice of interpolation space removes it. The usual answers are a faint noise overlay, a subtle repeating texture, or making the gradient travel a shorter distance. This tool emits CSS only and does no dithering.
Can I export it as an image?
No. The output is a CSS value, which is smaller than any image of it, resolution independent, and animatable. If you need a raster file — for an email template, say, where CSS gradients are unreliable — take a screenshot of the preview or build it in the pattern generator, which draws to a canvas.
Feed it from
Box Shadow Generator
Composes layered box and text shadows with a live preview and emits the CSS.
Background Pattern Generator
Generates tileable SVG patterns — stripes, dots, grids, noise — with colour and scale controls.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.
Colour Format Converter
Converts a colour between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH and names the nearest known colour.
Next
These accept what this tool produces, so the result can go straight in.
Colour Format Converter
Converts a colour between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH and names the nearest known colour.
CSS Beautifier & Minifier
Formats or minifies CSS without reordering anything, preserving the token stream exactly.
Palette Generator
Builds a harmonious palette from a base colour using complementary, triadic and analogous rules.
Background Pattern Generator
Generates tileable SVG patterns — stripes, dots, grids, noise — with colour and scale controls.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.
Contrast Checker
Scores a foreground and background pair against WCAG 2 and APCA and suggests the nearest passing colour.