Last updated 23 August 2026
Linear vs radial
Linear transitions in a straight line at whatever angle you set — 90° goes bottom to top, 0° left to right, and so on around the circle. Radial spreads outward from the center in every direction at once, so the angle control doesn't apply to it.
Linear, radial, and why gradients sometimes band
A linear gradient runs along a straight line at whatever angle you set: 0deg goes bottom to top, 90deg left to right. A radial gradient spreads outward from a point, which suits glows and spotlights rather than backgrounds.
Banding — visible stripes where you expected a smooth blend — shows up most when two colours are close together and stretched across a large area. There are simply not enough distinct values between them to fill the space smoothly. Widening the colour difference, shrinking the area, or adding a middle stop usually clears it up.
Two practical notes. Gradients between colours of similar brightness look muddy in the middle, so varying lightness as well as hue gives a livelier result. And if text sits on top, check contrast at both ends: a gradient that is readable at the light end can fail badly at the dark one.
Common questions
What's the difference between linear and radial?
Linear gradients transition in a straight line at a chosen angle. Radial gradients transition outward from a center point in a circle. Linear is far more common for backgrounds and buttons; radial suits glows and spotlight effects.
Does the angle matter for radial gradients?
No — a radial gradient spreads outward from the center in every direction equally, so an angle has no meaning for it. The angle control only applies to linear gradients.
Can I use more than two colors?
This tool generates a simple two-color gradient, which covers the large majority of everyday use. CSS itself supports any number of color stops if you want to hand-edit the generated code further.