About the CSS Gradient Generator
A visual builder for linear, radial, and conic CSS gradients — copy valid CSS instantly.
What it is
The CSS Gradient Generator is a free browser-based tool that lets you create any CSS gradient visually and copy the ready-to-use code. Choose between linear, radial, and conic gradient types, add as many color stops as you need, set each stop's color and alpha, and watch the live preview update in real time. When the gradient looks right, the full background CSS line is one click away.
A CSS gradient is a smooth transition between two or more colors, defined entirely in CSS — no images required. linear-gradient() blends along a straight line, radial-gradient() spreads out from a center point, and conic-gradient() sweeps the colors in a circle like a color wheel. All three are supported here.
Features
Three gradient types
Linear, radial, and conic — each with dedicated controls for angle, shape, and position.
Unlimited color stops
Add as many stops as you need. Position each one from 0–100% and blend them freely.
Alpha transparency
Each stop has an alpha channel (0–1). Set it below 1 and the CSS output switches to rgba() automatically.
Add Midpoint
Inserts a blended stop at the midpoint of the largest gap — a quick way to add smooth color transitions.
Live preview
The gradient preview and CSS output update instantly as you change any value.
Presets and random
Start from a ready-made preset or generate a random gradient and customise from there.
Copy-ready CSS
One click copies the full background line — paste straight into your stylesheet, no editing needed.
Fully client-side
Nothing is sent to a server. All processing happens in your browser — fast, private, and works offline.