Gradients as pixels, not CSS
A CSS gradient stops at the browser. Canvas overlays, video backdrops, email headers, OG cards, and design comps all need the actual file. Set the size, place the stops, and export the raster; the equivalent CSS string sits under the export controls when you need both.
Banding and the dithering slider
An 8-bit channel holds 256 levels. A gradient 1920px wide that travels from #0f172a to #38bdf8 crosses roughly 40 levels of blue over 1920 pixels, so each level occupies a band about 48px across. Those bands are the stripes you see on large flat gradients, and no amount of quality setting removes them, because the file is storing exactly what was asked for.
Ordered dithering fixes it by perturbing each pixel with a fixed 8x8 pattern before quantization. Neighboring pixels land on either side of the boundary, and the eye averages them back into a smooth transition. A value of 1 level is usually enough. Raise it toward 4 for very wide, very low-contrast gradients where the bands are still visible.
OKLab vs sRGB interpolation
Interpolation space decides what the middle of the gradient looks like. Mixing #0000ff and #ffff00 in sRGB drags the midpoint toward a desaturated grey, because the numeric average of two encoded values is not the perceptual average of two colors. OKLab is built so that equal steps look equal, which keeps chroma up across the whole run.
Linear RGB is the third option. It mixes light intensity rather than encoded values, which is what a renderer or compositor does internally. Blends look brighter through the middle, and it matches gradients you are compositing over rendered output.
Pick sRGB when the raster has to match an existing CSS gradient exactly. The tool writes in oklab into the CSS string when OKLab is selected, which modern browsers honor.
Stops, angles, and centers
Angles follow the CSS convention: 0deg points up and rotation runs clockwise, so 180deg is the common top-to-bottom fade. Radial gradients size themselves to the farthest corner from the center, so moving the center off-axis stretches the run rather than clipping it. Conic gradients start at the angle you set and sweep clockwise around the center point.
Stop easing controls the shape of each segment. Linear moves at a constant rate; smooth applies a smoothstep curve so each stop is approached and left gently, which softens the seam where two segments meet.
Transparency
Each stop carries its own opacity. A color at 100% fading to the same color at 0% gives a scrim: the overlay used to keep white text readable over a photo. Export it as PNG or WebP to keep the alpha channel. JPEG discards it, and the transparent end comes out black.