Gradient studio guide
Keep your work
Everything is made in your browser, and nothing is uploaded. The PNG is standard range (SDR), 8 bits per channel, with no see-through parts.
| Button | What you get |
|---|---|
| Copy CSS | The text in the CSS box, on the clipboard: a background: line to paste into a style sheet, or a note for types CSS cannot draw. |
| Save PNG | The frame as gradient.png, always 1920 × 1080 pixels, with the grain and any gradient map in it. |
What the CSS box holds depends on the type. Linear gives linear-gradient, Radial gives radial-gradient with its shape and centre, and Conic gives conic-gradient with its start angle and centre. Stripe gives repeating-linear-gradient with the whole run of stops once per stripe, and Reflected gives a linear-gradient that runs the stops in from both edges to the middle. Repeat count and Reverse every other one are written into the stops.
Mesh, Diamond, Spiral, Burst and Noise give only a note, since CSS has no way to draw them. With a picture loaded, the box holds a note too. The noise overlay is never in the CSS.
The canvas draws by the CSS rules, so the copied CSS matches the frame: 0deg points up and angles turn clockwise, a linear gradient's first and last stops sit on opposite corners, and radial rings reach the farthest corner. The help page has more.
The PNG holds exactly what the tool draws, at 1920 × 1080 whatever the frame's shape. Centre positions are kept as a share of the width and height, and the gradient line is worked out for the 16:9 aspect ratio, as the CSS would be in a box of that shape. For Linear, Radial, Conic, Mesh and a gradient map, the PNG's grain is worked out for every second pixel and doubled.
A gradient map in the PNG is fit inside the frame and sits on black where the picture's shape is not 16:9. The picture is read at no more than 800 pixels on its long side, or 512 on a phone, so a larger PNG can look blocky.
To use a pixel type on a web page, save the PNG and use it as a background image. Add grain before you save to hide banding, the visible steps a smooth gradient can show.