Stops, angle and shape
A gradient runs between colour stops. Click the bar to add one, drag it to move it, and give it an opacity to fade to see-through. Linear runs in a straight line at the angle on the dial (0 is upwards, 90 is left to right). Radial spreads out from a centre as a circle or an ellipse that reaches the farthest corner. Conic sweeps round the centre like a clock hand, starting from the angle.
sRGB, OKLab and OKLCH
Between two stops the browser has to make up the colours in between. In sRGB, the old default, a blend of two bright colours often goes grey or muddy in the middle. OKLab mixes by how bright and how colourful a colour looks to people, so the middle keeps its life. OKLCH goes round the colour wheel, so red to blue passes through purple and pink. For these the CSS has two lines: browsers since 2023 read the second, written with in oklab, and older ones fall back to the first, which adds in-between stops so it looks nearly the same.
Mesh gradients and saving
A mesh gradient sets a colour at each point of a 3 × 3 or 4 × 4 grid and blends smoothly between them, giving the soft, blobby backgrounds popular in app and wallpaper design. Smooth curves through the points; Straight blends in straight lines between them, which shows the grid more. The PNG is drawn in this page at the size you choose, from a 1920 × 1080 desktop to a 1170 × 2532 phone wallpaper. The link in the address bar keeps the whole gradient, so you can bookmark it or send it.
Questions
Can I get CSS for a mesh gradient?
No. CSS has no mesh gradient, and stacking radial gradients only roughly copies one, so mesh gradients save as a PNG only. Use it as a background-image.
Why is there no SVG for conic gradients?
SVG has linear and radial gradients but no conic one. Save a conic gradient as a PNG, or use its CSS.
Will the PNG match what the browser draws?
Yes, to within a shade: it is drawn with the same geometry and the same colour maths as the CSS, pixel by pixel. Colours are 8-bit, so a long, gentle gradient over a large size can show faint bands, as any 8-bit PNG can.
Do I need a colour first?
Pick one in the Color Picker and paste its code into a stop, or press Random for a starting point.