Why more than two color stops matters#
A gradient is not limited to a simple fade between two colors — any number of stops can be placed at any position along it, each blending smoothly into its neighbors. A three-stop gradient going red → yellow → blue is a genuinely different tool than a two-stop one, useful for sunset effects, brand-color blends, or a smoother transition than a single interpolation can produce. This generator supports adding as many stops as the design calls for, not a fixed two.
Transparency is a property of the color, not the gradient#
A gradient that fades to transparent — common for an overlay on top of an image, or a fade-out effect at the edge of a scrollable list — is built by using rgba() or a color with an alpha channel as one of the stops, not a separate transparency setting on the gradient itself. rgba(0, 0, 0, 0) and rgba(0, 0, 0, 1) as the two stops produces a fade from fully transparent to fully opaque black, which is the standard technique for a photo-overlay gradient.
Linear angle versus radial shape#
A linear gradient's angle follows CSS convention: 0deg points up, 90deg points right, 180deg points down — clockwise from the top, not the mathematical convention of counter-clockwise from the right. A radial gradient instead takes a shape: circle produces a perfectly round gradient regardless of the element's aspect ratio, while ellipse (the CSS default) stretches to match the box it is applied to.