Gradient studio guide

Overview

Gradient studio paints a gradient into the frame and writes the CSS for it.

A soft mesh gradient of coral, gold, pink, violet, cyan, green and lime blending across the frame
The Mesh type on its 3 × 3 grid, with the nine colours it opens with.

A gradient is a smooth change from one colour to another. Most of the ten types here blend along a list of colour stops, each a colour at a position from 0 to 100%.

The browser draws three of them itself: linear, radial and conic. Six more are worked out one pixel at a time: diamond, spiral, burst, noise, stripe and reflected.

The tenth, the mesh gradient, has no stops. It pins a colour to each point of a grid, 2 × 2 up to 4 × 4, and blends between the four points around every pixel.

You can lay a grain overlay on top, run a picture's brightness through the stops, copy a CSS gradient, or save a 1920 × 1080 PNG.

Open Gradient studio Start here

In this guide

  1. StartWhat you need, and your first gradient in five steps.
  2. Every controlEvery control in the panel, one line each.
  3. Three looksThree pictures and the settings that made them.
  4. Keep your workThe CSS, the PNG, and where they differ.
  5. HelpWhat to do when something goes wrong.

It runs in your browser on a 2D canvas. It needs no GPU, and nothing is uploaded. A mouse, a trackpad and a finger all work.