What the Gradient Generator builds, and the two gradient types it doesn't — with examples of when to reach for each.
A linear gradient blends colors along a straight line at a chosen angle. It's the gradient behind most buttons, hero banners, and card overlays because it reads as "one smooth surface" rather than drawing attention to itself.
The angle is measured clockwise from the top: 0deg points up, 90deg points right, 180deg points down. Most UI gradients land between 120deg and 160deg, which reads as a natural "light source from the upper left" without feeling directional or busy.
A radial gradient spreads outward from a center point instead of a line. It's a good fit for spotlight effects, badges, or backgrounds where you want attention pulled toward the middle of an element rather than across it.
The circle at center part can be changed to ellipse at top left or similar to reposition and reshape the gradient — useful for glow effects positioned behind a specific UI element rather than centered on the whole container.
A conic gradient rotates color around a center point rather than radiating outward. It's the shape behind color wheels, progress rings, and pie-chart-style visualizations.
Repeating the first color at the end (as above) avoids a hard seam where the gradient wraps back around to its starting angle.
By default, colors in a gradient are spaced evenly. Adding a percentage after any color pins it to a specific point along the gradient:
This holds the first color solid until 40% of the way through, then blends into the second color over the remaining 60% — useful for a gradient that should look mostly flat with just a hint of color shift at the edge.
The Gradient Generator on this site builds two-color linear gradients with a live angle control, and gives you the exact CSS line to copy. For a three-color gradient or a radial/conic variant, generate the two-color base here, then edit the function name and add an extra color stop by hand using the patterns above.