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.
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.