CSS Gradient Generator
Build linear, radial, and conic CSS gradients visually, then copy the code. Free, no signup, no data sent to servers.
background: linear-gradient(90deg, #ff3d8f 0%, #7c3aed 100%);
Linear, radial, and conic gradients
A linear gradient transitions colors along a straight line at a given angle. A radial gradient radiates from a center point outward, either as a circle or an ellipse. A conic gradient sweeps colors around a center point like a color wheel, useful for pie charts and loading spinners. All three accept the same list of color stops.
What a color stop is
A color stop is a color plus a position (0-100%) along the gradient. Two stops is the minimum for any gradient; adding more lets you build multi-color transitions. The browser blends smoothly between each consecutive pair of stops.
Using the generated CSS
The output is a full background declaration — paste it directly into a CSS file or a style attribute. Gradients are valid anywhere a color or image value is accepted (background, border-image, mask), and render with no images or extra HTTP requests.