Linear, radial, conic and mesh gradients from your palette. Choose how the colours blend, add grain if you like, then copy the CSS or download SVG, PNG or WebP.
Loading the gradient generator…
How the gradient generator works
How colours blend
sRGB is the classic CSS blend and can turn muddy or grey in the middle. OKLab blends evenly by eye; OKLCH also keeps colours vivid by travelling around the hue circle the short way. For OKLab and OKLCH the CSS includes a sampled sRGB line first, for older browsers.
Honest exports
CSS is offered only where CSS can draw the gradient. SVG is offered only where it is faithful (linear and circular radial, without grain); otherwise the tool says why. PNG and WebP are exact renders of what you see.
Mesh and grain
A mesh blends movable colour points in OKLab. It has no CSS or SVG equivalent, so it downloads as an image. Grain is a raster effect from a fixed seed: it appears only in PNG and WebP.
Recipes and palettes
Save a gradient as a recipe to reopen and edit it later; each save is a new version. “Colours from this gradient” samples evenly spaced colours you can open in the palette generator or as Tailwind scales.