Design linear, radial and conic CSS gradients visually, with smooth colour blending, and copy the CSS.
background: linear-gradient(135deg, #FDBA74 0%, #C2410C 55%, #7C2D12 100%); background: linear-gradient(135deg in oklch, #FDBA74 0%, #C2410C 55%, #7C2D12 100%);
Linear, radial or conic.
Click the bar to add a stop; drag to move it.
With an OKLCH version for smoother blends.
Blending in sRGB can turn the middle grey. Blending in OKLCH keeps colours bright — we include both.
No. CSS gradients are drawn by the browser and weigh nothing compared to an image.
Yes: set it as the background, then use background-clip: text and color: transparent.