← Toolkit
/
Gradient Studio
// tool
Gradient
Studio
Linear, radial, conic. OKLCH interpolation so midtones stay vivid. Grain overlay, CSS/SVG/PNG out.
Gradient Type
Linear
Radial
Conic
INTERPOLATE
OKLCH — perceptual hue
OKLab — perceptual
LCH (CIE) — perceptual
HSL — short hue
HSL — long hue
sRGB — legacy
ANGLE
135°
SHAPE
Ellipse
Circle
EXTENT
farthest-corner
closest-side
closest-corner
farthest-side
CENTER
x:
50%
y:
50%
FROM
0°
CENTER
x:
50%
y:
50%
Color Stops
click bar to add · drag to move
%
−
Effects
GRAIN
0%
GRAIN SIZE
.95
BLEND
overlay
soft-light
multiply
screen
Presets
Export PNG
WIDTH
×
Download PNG
✨ Random
sRGB
OKLCH
Modern CSS
Legacy CSS
Tailwind
SVG
CSS Vars
JSON
Copy