CSS Gradient Generator: Linear and Radial, Side by Side

A gradient is just a smooth transition between colors, but the CSS syntax to write one by hand — angles, percentages, comma-separated color stops — is easy to get subtly wrong. A generator handles the syntax; the only real decision left is which of the two shapes actually fits the design.

Linear: A Straight-Line Transition

background: linear-gradient(90deg, #f97316 0%, #db2777 50%, #7c3aed 100%);

Colors transition along a straight line at a chosen angle — 90 degrees runs left to right, 180 degrees runs top to bottom, and any angle in between runs diagonally. This is the more common gradient shape, used constantly for backgrounds, buttons, and banners.

Radial: A Transition From a Center Point

background: radial-gradient(circle at center, #0ea5e9 0%, #2563eb 50%, #4f46e5 100%);

Colors radiate outward from a center point instead of running in a straight line — useful for spotlight effects, glow effects behind an element, or a more organic, less directional feel than a linear gradient provides.

Multiple Color Stops

Both gradient types support more than two colors — each additional stop is just another color and position added to the same comma-separated list. Three stops (as in the examples above) produce a smoother, more layered transition than a plain two-color gradient, without needing any different syntax.