Gradient studio guide

Every control

Every control in the panel, top to bottom. Only the settings for the chosen type are shown; the rest of the panel stays for every type. Noise overlay and Gradient map start closed; tap their titles to open them.

Load and save

They stay at the top while the panel scrolls. Your pictures stay on this device for every lab tool until you press × on a tile; Reset puts the controls back and leaves them.

Image AButton: Your picture, for a gradient map. Press it to open one from your device, or drop one on the frame; two at once fill A and B. It is kept on this device, never uploaded, and every lab tool that takes a picture opens with it until you press × on its corner. Its brightness is run through the colour stops: the darkest parts take the lowest stop and the brightest the highest. See luminance.
SwapButton: Changes which tile Gradient studio uses, so a picture you added as B in another tool can be used here. When the other tile is empty, the gradient comes back.
Image BButton: A second kept picture. Gradient studio maps one picture at a time: the tile it is not using is dimmed and says Not used here, and pressing it only says so.
Save PNGButton: Saves gradient.png at 1920 × 1080, whatever shape the frame is.
Record videoButton: Records one sweep, frame by frame, and saves it as gradient-studio.mp4 (H.264, so it plays anywhere); a browser that cannot write MP4 gets a WebM. Sweep starts by itself if it was not running, and stops after. See MP4 and WebM.
Copy CSSButton: Copies what the CSS box holds, notes included, to the clipboard. See clipboard.

Type

Linear · Radial · Conic · Mesh · Diamond · Spiral · Burst · Noise · Stripe · ReflectedPick one: The kind of gradient. The three browser types draw at once; the others are worked out pixel by pixel, which takes longer on a big frame.

Linear: Colours along a straight line at the Angle you set. See linear gradient.

Radial: Colours in rings from a centre you place. See radial gradient.

Conic: Colours round a centre, like a clock hand sweeping. See conic gradient.

Mesh: A grid of colour points blended across the whole frame. See mesh gradient.

Diamond: Square rings from the middle: the first stop in the centre, the last at the edges. It has no settings of its own. See diamond gradient.

Spiral: The stops wound round the middle in a spiral. See spiral gradient.

Burst: Rays from the middle, each fading from the first stop to the last and back. See burst gradient.

Noise: Smooth Perlin noise run through the stops, so the colours drift in soft blobs.

Stripe: Bands across the frame, each holding the whole run of stops. See stripe gradient.

Reflected: The last stop along a middle line and the first at both sides, like a mirror. It follows Angle. See reflected gradient.

Direction

Shown for Linear and Reflected.

AngleSlider · 0 to 360 · starts at 135: Which way the gradient runs, counted as CSS counts it: 0° runs bottom to top, 90° left to right. The first and last stops sit on opposite corners of the frame. See gradient angle.

Position

Shown for Radial.

X positionSlider · 0 to 100 · starts at 50: Where the centre sits across the frame, from the left edge (0%) to the right (100%).
Y positionSlider · 0 to 100 · starts at 50: Where the centre sits down the frame, from the top (0%) to the bottom (100%).
Ellipse · CirclePick one: The shape of the rings. Both reach the corner farthest from the centre, the way the copied CSS draws them.

Ellipse: Rings stretched to the frame's shape.

Circle: Round rings.

Conic settings

Shown for Conic. As in CSS, 0° starts the sweep at the top and angles turn clockwise.

Start angleSlider · 0 to 360 · starts at 0: Where the sweep starts, turned round the centre.
X positionSlider · 0 to 100 · starts at 50: Where the centre of the sweep sits across the frame.
Y positionSlider · 0 to 100 · starts at 50: Where the centre of the sweep sits down the frame.

Mesh colors

Shown for Mesh, in place of Color stops.

2 × 2 · 3 × 3 · 4 × 4Pick one: How many colour points the mesh has across and down. The points sit evenly from corner to corner. See grid size.

2 × 2: Four points, one in each corner.

3 × 3: Nine points. The size the page opens with.

4 × 4: Sixteen points, for more colour changes.
Bicubic smoothingOn or off · starts on: Eases each blend with a curve, so no creases show where the grid squares meet. Off, the colours blend in straight lines (bilinear interpolation). See bicubic smoothing.
Colour gridFilled in by the tool: One colour picker per point, laid out like the mesh: TL is top left, BR bottom right. A new colour is drawn when the picker closes. Going to a smaller grid drops the extra colours; a bigger grid fills new points with colours of its own.
Randomize colorsButton: Gives every point a new random colour. Each press is different. See randomize.

Spiral settings

Shown for Spiral. The spiral turns round the middle of the frame.

TightnessSlider · 1 to 20 · starts at 6: How many times the colours wind round between the middle and the edge. Higher winds more. See tightness.

Burst settings

Shown for Burst. The rays leave the middle of the frame.

Ray countSlider · 3 to 36 · starts at 12: How many rays the burst has. See ray count.

Noise gradient

Shown for the Noise type.

ScaleSlider · 1 to 50 · starts at 8: How many noise blobs fit across the frame. Low gives a few big drifts; high gives many small ones. See noise scale.

Stripe settings

Shown for Stripe.

Stripe countSlider · 2 to 24 · starts at 6: How many stripes cross the frame.
AngleSlider · 0 to 360 · starts at 0: Which way the stripes run, counted as CSS counts it: 0° gives level stripes that repeat from bottom to top, 90° upright stripes that repeat from left to right.

Repeat and pattern

Shown for Linear, Stripe and Reflected, the three types it works on.

Repeat countSlider · 1 to 10 · starts at 1: Lays the run of stops down this many times: along the line for Linear, inside each stripe for Stripe, and on each side of the middle for Reflected. At 1 it runs once. See repeating gradient.
Reverse every other oneOn or off · starts off: Turns every second repeat backwards, so the repeats meet on the same colour instead of a hard edge.

Color stops

Hidden for Mesh. The stops are sorted by position when the gradient is drawn, so their order in the list does not matter.

Stop rowsFilled in by the tool: One row per stop: a colour picker, a position slider from 0 to 100%, the position, and Remove when there are more than two stops. A new colour is drawn when the picker closes; the slider draws as you drag. See colour stop.
Add a stopButton: Adds a white stop halfway between the lowest and highest positions.

Noise overlay

Add noiseOn or off · starts off: Blends a noise pattern over the gradient, the image map and the PNG. Starts off. See grain overlay.
Perlin · Simplex · WorleyPick one: The noise pattern laid on top. See noise.

Perlin: Soft, cloudy grain. See Perlin noise.

Simplex: Soft grain on a triangle grid, with smaller blobs. See simplex noise.

Worley: Cells like pebbles, dark at each point and lighter away from it. See Worley noise.
ScaleSlider · 1 to 100 · starts at 20: How many noise cells fit across the frame. Higher gives finer grain. See noise scale.
OpacitySlider · 0 to 100 · starts at 30: How strongly the noise shows. At 0% it has no effect.
Overlay · Multiply · Screen · AddPick one: How the noise mixes with the colours under it. See blend mode.

Overlay: Darkens the dark parts and lightens the light parts. The page opens with it.

Multiply: Only darkens.

Screen: Only lightens.

Add: Adds the noise to the colours, so the picture only gets brighter.

Gradient map from an image

While a picture is loaded, it replaces the gradient: the type and its settings have no effect until you clear it.

Clear the imageButton: Appears once a picture is loaded. Removes the picture and brings the gradient back, as × on the tile in use does: the picture is forgotten on this device too.

Presets

Sixteen swatches. Each shows its colours as a 135° linear gradient.

Preset swatchesFilled in by the tool: Press one to load its colour stops in place of yours. Holographic also switches to the Noise type and Chrome to Stripe; Frost and Copper turn on Add noise, which then stays on. The rest keep your type. See preset.

CSS output

CSS boxFilled in by the tool: The CSS for the current gradient, written as you work. Linear, Radial, Conic, Stripe and Reflected give a working background line that draws what the frame shows, grain aside; the other types and a loaded picture give only a note to save the PNG. See CSS gradient.

Sweep

Space presses Sweep, the lab's one keyboard. See loop.

SweepButton: Starts and stops the sweep: the angle breathes around the value you set, a smooth wave, and returns to it when you stop. See sine wave and easing.
Seconds a cycleSlider · 1 to 12 · starts at 4: How long one breath takes, in seconds. Record video keeps exactly one, so the clip loops. See loop.
WidthSlider · 10 to 100 · starts at 60: How far the slider travels from end to end, as a share of its whole range, centred on your value. 100 swings the whole way.

Reset

ResetButton: Puts every setting back to how the page opened: Linear at 135°, the three coral-to-gold stops, the 3 × 3 mesh colours and no noise. Your picture stays.