Which gradient you actually want
A linear gradient runs along a straight line and is what nearly every hero, card and button background uses. The angle is measured clockwise from pointing up, which catches almost everyone out: 0° runs bottom to top, 90° left to right, 180° top to bottom. If a gradient looks flipped compared with Figma, that convention is why — Figma’s angle handle starts from a different zero.
A radial gradient spreads outward from a point. It is the right choice for a glow, a spotlight, or a soft vignette behind a headline, and the wrong choice for a flat surface, where it reads as a smudge. Move the center off the middle and it stops looking like a bullseye, which is the single change that makes most radial gradients look intentional.
If you want the modern blurred, multi-color look rather than either of these, that is a different technique — several soft radial shapes overlapping. The mesh gradient maker builds those, with a draggable handle for each color.
Banding, and the three things that fix it
The most common complaint about gradients is faint stripes across what should be a smooth ramp. It is not a mistake you made. Screens carry 256 steps per color channel, and a gradient stretched across a wide area between two similar colors has more pixels to fill than it has distinct values to fill them with.
Three fixes, in the order they usually work. Increase the contrast between the colors — banding is worst between two that are nearly identical. Add a color in the middle that is not on the straight line between the ends, which gives the ramp somewhere to go. And shorten the distance: the same two colors across 300px band far less than across 1600px. A little grain over the top hides the rest, which is why so many gradient backgrounds have noise on them.
Where the colors sit
Each color carries a position from 0% to 100%. Two colors at 0 and 100 give an even ramp. Move them inward — say 20% and 80% — and you get a band of solid color at each end with the blend compressed in the middle, which is usually what someone means by a “subtle” gradient. Put two colors at the same position and you get a hard edge instead of a blend, which is how you make a two-tone background without a second shape.
Adding a color here never changes what you are looking at. The new one is placed in the widest gap, in the color the blend already had at that point, so it gives you a handle to drag rather than a surprise.
Taking it somewhere else
Download the PNG for anything that is not a browser: a Figma fill, a slide, a social card, an email background, print. The sizes cover the usual cases, and 1200 × 630 is the one for a link preview.
Copy the colors if you would rather rebuild the gradient in the tool you are already in. You get the hex codes in order, which paste straight into Figma’s gradient stops.
Copy the CSS if the site is hand-built or you are handing the design to someone who will write it. One note if you do: gradients are painted as a background image, so keep a plain background color underneath as a fallback.
Picking the colors is the harder half. If you do not have them yet, take a set from the palette collections, or pull them out of an image you are already working from. And if type is going over the gradient, check the contrast against the darkest point of the ramp rather than the average — that is where it will fail first.
