How it works
Five kinds
Linear, radial and conic gradients use colour stops, each with a colour and a position from 0 to 100%. Corners blends four colours bilinearly across the picture, and freeform blends four or nine movable points by distance.
Choose where colours blend: sRGB is what CSS does by default, OKLab keeps lightness even through the middle, and OKLCH travels around the hue wheel. The CSS output adds the matching “in oklab” or “in oklch” method.
Smoothing, grain and export
Pigment steps adds three OKLab steps between each pair of stops, so the in-between colours look less muddy. Grain adds fixed noise that helps hide banding on large smooth areas.
Pick a size preset or type a width and height from 100 to 8192 px, then download the PNG. The CSS box is a copy of what the preview uses; corners and freeform cannot be exact in CSS, so export the image for those.
