What this is
Gradient studio paints a gradient into a canvas and shows you the CSS behind it. Ten kinds are on offer: the three a browser draws itself, linear, radial and conic, and seven the tool works out pixel by pixel, among them diamond, spiral, burst and stripe. A mesh gradient is the odd one out: instead of one line of color stops it holds a grid of color points, two by two up to four by four, and blends between all of them at once.
How to use it
- Pick a type, then move the color stops or load one of the 16 presets.
- Add grain with the noise overlay, or drop an image to map its brightness through the gradient.
- Copy the CSS, or save a 1920 × 1080 PNG.
Read the guide
Words: mesh gradient · interpolation · noise
Common questions
Does it need WebGL or a GPU?
No. It draws on a plain 2D canvas. Linear, Radial and Conic are drawn by the browser; the other types are worked out in JavaScript, one pixel at a time. Any current browser works.
Does the copied CSS match the frame?
Yes, for Linear, Radial, Conic, Stripe and Reflected. The canvas follows the CSS rules: 0° points up and angles turn clockwise, a linear gradient runs corner to corner, and radial rings, round or stretched, reach the farthest corner. The noise overlay is never in the CSS. The other types have no CSS; save the PNG for those.
What does Repeat count do?
Repeat count lays the run of stops down several times: along the line for Linear, inside each stripe for Stripe, and on each side of the middle for Reflected. Reverse every other one turns every second run backwards. Both show only for those three types, and the copied CSS carries them.
Is the grain the same every time?
Yes. The noise pattern, for the grain and for the Noise type, comes from a fixed seed, so the same settings draw the same picture on every load and in the PNG.
On the blog: CSS gradient generators 2026