/gradient

Gradient studio

Drag stops on the bar. Pick a type. Copy the CSS. All in the browser.

Type Angle 135° Interpolation

CSS

SVG

Presets

What this is: CSS gradients are a function that maps positions to colors. Three flavours: linear (along an angle), radial (from a center), conic (rotating).
How it works: You pick stops and positions; we emit the CSS, plus an SVG version (with or ) for use in design tools. The oklch interpolation mode produces smoother ramps through intermediate hues.
Worked example: linear-gradient(135deg in oklch, #c8102e 0%, #008c45 100%)
Privacy: Runs entirely in your browser. No network requests. Nothing you paste or type leaves this tab.