CSS Gradient Generator

CSS Gradient Generator

CSS gradients let you create smooth color transitions without images. The browser renders them as backgrounds using the linear-gradient(), radial-gradient(), and conic-gradient() functions. This tool builds the CSS visually so you can see the result while adjusting colors, angles, and stop positions.

How to Use

1. Pick a gradient type. Linear for directional blends, radial for circular fades, conic for angular sweeps
2. Add and adjust color stops. Click the color swatch to pick a color, drag the slider to set its position along the gradient
3. Set the direction. For linear gradients, use the angle dial or arrow buttons. For radial and conic, adjust the center position with the X/Y sliders
4. Try a preset for inspiration. Click any preset thumbnail to load its colors and settings as a starting point
5. Copy the CSS. Click Copy or press Cmd+C to copy the background property to your clipboard

How CSS Gradients Work Under the Hood

A CSS gradient is technically an image, not a color. The background shorthand accepts it because background-image is part of the shorthand. This means you can layer multiple gradients on the same element by separating them with commas, and you can use gradients anywhere an image is accepted: border-image, list-style-image, even mask-image.

The browser calculates the gradient by creating a “gradient line” (for linear), a “gradient ray” (for radial), or a “gradient arc” (for conic). Color stops define the colors at specific points along this line. Between stops, the browser interpolates in the sRGB color space by default. CSS Color Level 4 introduces in oklab and in oklch interpolation for more perceptually uniform blends, but browser support is still rolling out.

Stop positions are optional. If you omit them, the browser distributes stops evenly. If you specify only some positions, the browser fills in the gaps. Two stops at the same position create a hard edge, which is useful for creating stripes with repeating-linear-gradient.

Performance

Gradients are cheap to render. The browser rasterizes them once and caches the result until the element resizes. They are significantly faster than loading an image file, have zero network cost, and scale perfectly to any resolution. For simple backgrounds, gradients are almost always the right choice over images.

Need to URL encode a gradient value for use in an SVG data URI or query parameter? The URL Encoder handles the percent encoding.