Live CSS Gradient Generator
Design linear and radial CSS gradients in your browser. Adjust colors, angle, type and color stops, watch the live preview update, and copy clean, production-ready CSS in one click.
background: linear-gradient(...);
How this gradient generator works
A CSS gradient is an image generated by the browser from a list of color stops. Each stop pairs a color with a position between 0% and 100%. Between two adjacent stops the browser linearly interpolates the red, green and blue channels, so a stop at #ff0000 0% blending into #0000ff 100% produces every shade along the line. This tool builds the exact CSS function string for you: it sorts your stops by position, joins them as color position% pairs, and wraps them in the correct function.
For a linear gradient the syntax is linear-gradient(angle, stop1, stop2, ...). The angle sets the direction of the gradient line: 0deg points up, 90deg points right, and 180deg points down, increasing clockwise. The gradient line passes through the center of the box, and stop positions are measured as a fraction of that line's length. For a radial gradient the colors radiate outward from a center point, so the syntax becomes radial-gradient(shape, stop1, stop2, ...) where shape is circle or ellipse. A conic gradient sweeps the colors around a center like a color wheel using conic-gradient(from angle, ...).
The math behind a single channel at any point is straightforward: if a position p falls between stops at positions p1 and p2 with channel values c1 and c2, the interpolated value is c1 + (c2 - c1) * (p - p1) / (p2 - p1). Browsers do this in sRGB space by default for the legacy syntax used here, which keeps results consistent across devices. Add as many stops as you like, drag the position sliders, and the generated code stays valid and copy-ready. Paste it straight into a background declaration in your stylesheet.