Linear vs radial CSS gradients
How linear and radial gradients differ, what the angle and stop positions mean, and when to reach for each in real layouts.
What a CSS gradient really is
A gradient is an image generated by the browser, not a color, which is why it lives inside a background or background-image property rather than a color property. Because it is an image, it fills its box and scales with it, and you can layer several gradients or combine them with real images. The two everyday types are linear-gradient, which blends along a straight line, and radial-gradient, which blends outward from a center point. Both take the same list of color stops that this generator writes for you.
Reading the angle in a linear gradient
The first token in a linear gradient is its angle, written in degrees. Contrary to a math convention, 0deg points straight up and the angle increases clockwise, so 90deg runs left to right and 180deg runs top to bottom. The angle only rotates the direction of the blend; it never changes which colors appear. This tool exposes the angle as a slider from 0 to 360 so you can spin the direction and watch the preview follow.
How color stops and positions work
Each color stop is a color paired with a position from 0 to 100 percent that marks where that color is fully applied. Between two stops the browser interpolates smoothly, and outside the first and last stops the edge colors simply continue. When you do not specify positions, they are distributed evenly, which is what the generator does: two colors anchor the ends, and extra colors slot in at equal intervals. Even spacing gives a balanced blend, while uneven positions can create hard bands or a color that dominates.
Choosing linear or radial
Reach for a linear gradient when you want a directional wash, such as a header that fades from one brand color to another or a subtle top to bottom shade behind text. Radial gradients suit spotlights, soft glows and vignette effects where the color should radiate from a point outward. Radial ignores the angle because a circle has no single direction, so if you switch to radial the angle slider disappears in this tool. Try both on the same colors in the preview to feel the difference before you commit.