Gradient studio guide

Start

The tool opens with a linear gradient from coral to gold, and its CSS in the panel.

What you need

• A current browser. Chrome, Edge, Firefox and Safari all draw it; no WebGL or GPU is needed.
• A picture, only if you want to make a gradient map from one.

Your first result

1. Open Gradient studio. The first gradient is already there.
2. Under Type, pick a kind, such as Radial or Mesh. Its own settings open below.
3. Move the sliders under Color stops, or change a stop's colour. Or press a swatch under Presets to load a set of colours.
4. Open Noise overlay and turn on Add noise for a little grain.
5. Under CSS output, press Copy CSS, or press Save PNG to keep gradient.png at 1920 × 1080.

Good to know

• The CSS box holds working CSS for Linear, Radial, Conic, Stripe and Reflected. The other types say to save the PNG instead; keep says why.
• The copied CSS draws what the frame shows: the canvas follows the same rules for angles, spread and ring shape. Only the noise overlay stays out of the CSS.
• Mesh has no colour stops. Set its colours in the grid under Mesh colors instead.
• Reset puts every setting back to how the page opened. Your picture stays, and so does its gradient map; press × on its tile, or Clear the image, to take it away.
• Your picture is kept on this device, and every lab tool that takes a picture opens with it, until you press × on its tile.
• On a phone the controls sit in a bar at the bottom of the screen. Tap the bar to open them.