Which kind of gradient to use
| Type | Controls | CSS you get |
|---|---|---|
| Linear | Angle 0–360°, eight direction shortcuts, 2 to 50 stops | linear-gradient(), identical to the preview |
| Radial | Circle or Oval, centre X and Y, Size 10–150, 2 to 50 stops | radial-gradient(); Oval matches any box, Circle is sized for a 16:9 box like the preview |
| Mesh | 2 to 15 colour points you drag around the preview | An approximation built from stacked radial gradients |
Mesh blends every point smoothly into its neighbours, which plain CSS cannot do. The copied CSS places a soft circle of each colour at each point over a pale grey base. It is close for light, airy meshes and noticeably lighter for dark ones. If the exact look matters, download the PNG and use it as a background image.
Reading the angle
In CSS, 0deg runs from bottom to top, 90deg from left to right and 180deg from top to bottom. The default 135deg starts in the top-left corner and ends in the bottom-right. Other design apps do not all count angles the same way, so if you are copying a gradient from a mockup, match the direction by eye using the arrow shortcuts rather than typing the number across.
Editing stops and points
- Drag stops along the track to move them, or type an exact percentage in the list below it.
- Double-click a stop, a list row or a mesh point to open the colour editor.
- In Radial mode, click or drag on the preview to move the centre.
- In Mesh mode, drag points across the preview to reshape the blend.
Downloading a PNG
Download PNG saves the gradient at 1200 × 675 pixels, a 16:9 frame that suits slides, video thumbnails and social posts. The image is drawn on your device and saved straight to your downloads. For a different shape, trim it in the image cropper; for a bigger or smaller file, use the image resizer. A smooth gradient survives both without visible damage.
Questions
Can I make text itself a gradient?
Yes, with the copied value. Use it as background-image on the text element, then add background-clip: text and color: transparent.
Why do I see banding in a dark gradient?
Two dark colours close together leave only a few steps of colour between them, so the screen shows visible bands. Spread the stops further apart or add a slightly lighter stop in the middle.
How do I pick colours that work together?
Start from a set made on the colour wheel; analogous colours blend into the smoothest gradients.