Gradient studio guide

Help

Short answers to what goes wrong most often.

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.

It is slow

The pixel types, from Mesh to Reflected, are worked out on your processor every time a slider moves. A bigger window means more pixels. Linear, Radial and Conic stay quick. Save PNG redraws the gradient at 1920 × 1080, so it can take a moment.

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.

A new colour does not show

The colour of a stop or a mesh point is drawn when the colour picker closes. Close the picker, or click outside it.

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.

My picture does nothing, or looks blocky

Only image files are taken. If the browser cannot open the file, nothing changes; save it as a PNG or JPEG and try again.

Pictures are read at 800 pixels on their long side, or 512 on a phone, then stretched to fill the frame and the PNG, so they can look blocky. The picture sits on black where its shape does not match the frame.

I cannot see the colour stops

The Mesh type hides them. A gradient map still uses the stops, so pick another type to change them while a picture is loaded.

The PNG is not the shape of my frame

The PNG is always 1920 × 1080, a 16:9 aspect ratio. Positions are kept as a share of the width and height, so the gradient stretches to fit. On a high-density screen, the pixel types are worked out at half size and smoothed up.

Does it work on a phone or tablet?

Yes. Every type, preset, noise mode and export is there. On a phone or touch screen, the frame is drawn at up to 640 pixels on its long side to save memory. The PNG is still 1920 × 1080.

Copy CSS did nothing

Some browsers do not let a page write to the clipboard. The message says Copy failed; select the text in the CSS box and copy it by hand.

Is my picture uploaded?

No. The picture is read and mapped on your device and never leaves it.

Why is a picture from another tool here?

Pictures you add are kept on this device for every lab tool that takes one, so you need not add them again. Press × on a tile to forget that picture; the gradient comes back.

Are there keyboard shortcuts?

The tool has none of its own. Anywhere in the lab, Ctrl K, or Cmd K on a Mac, opens the list of all tools.

Why does the video stop by itself?

Record video keeps exactly one sweep, Seconds a cycle long, so the clip loops when it plays. It is an MP4 in H.264, the kind phones, Photos and Instagram play.