Linear, radial and conic. Copy the CSS or download the PNG.

Drag a handle to move a stop. Click an empty spot on the bar to add one. The gold handle is selected below.

Opacity 100% Position

Type

Angle °

Blend

OKLCH blends without the gray dead zone. The PNG always renders in sRGB.

Presets

Export

CSS

About the CSS Gradient Generator

Builds linear, radial and conic gradients on a live preview and hands you the exact style rule, in your browser. Drag the stops until it looks right, then copy the CSS or download a PNG.

Every Setting

Stops

The colored handles on the bar. Drag to move one, click an empty spot to add one in the sampled color, double-click to remove. Each stop has its own color, transparency and exact position; Randomize deals a fresh pair when you need a start.

Type

Linear runs along a line, radial grows from a point, conic sweeps around one. All three read from the same stops.

Angle

The direction for linear and the starting rotation for conic, on a slider with an exact-degree box.

Origin

Where radial and conic gradients start from: center or an edge.

Blend

The color space the browser mixes in. OKLCH blends without the gray dead zone that sRGB puts between saturated opposites; the PNG always renders in sRGB.

Presets

Curated two-stop gradients, including the mesh-style aurora looks, as one-click starting points.

Export

PNG at social-card, HD, portrait or square sizes. Copy CSS gives the rule; the link carries the whole gradient for sharing.

Common Questions

Do the colors have to be opaque?

No. Every stop has its own transparency, which is how fade-to-nothing overlays are made.

What is the difference between linear, radial and conic?

Linear runs along a line, radial grows from a point, conic sweeps around one. All three are a click apart here.

CSS Copy

About the CSS Gradient Generator

Every Setting

Common Questions

CSS