Linear, radial & conic
Build all three CSS gradient types from one tool.
Gradient settings
90°
0°
Gradient preview and CSS
Build linear, radial, and conic gradients visually with any number of color stops. Watch the preview update live, then copy the ready-to-use CSS straight into your stylesheet.
Start building a gradientThis tool builds linear, radial, and conic CSS gradients visually, with support for any number of color stops at custom positions. Adjust the angle, shape, and position, watch the live preview, and copy the resulting CSS directly into your project.
Build all three CSS gradient types from one tool.
Add as many color stops as you need, each with its own position.
Start from a curated set of ready-made gradients and tweak from there.
The gradient is generated locally in your browser.
| Type | Settings | Generated CSS |
|---|---|---|
| Linear | 90°, two stops | background: linear-gradient(90deg, #ff7a18 0%, #af002d 100%); |
| Radial | Circle, center | background: radial-gradient(circle at center, #00c6ff 0%, #0072ff 100%); |
A linear gradient transitions colors along a straight line at a chosen angle. A radial gradient radiates outward from a center point. A conic gradient sweeps colors around a center point like a color wheel.
You can add as many color stops as you like, each with its own color and position percentage, though most gradients look best with two to four stops.
Copy the CSS and paste it as the background or background-image value of any element in your stylesheet.
Linear and radial gradients are supported in all modern browsers. Conic gradients are supported in all current major browsers as well, though very old browser versions may not render them.
CSS gradients are rendered by the browser without an image file, so they are typically faster to load than a gradient baked into a PNG or JPEG background image.
No. The gradient preview and CSS are generated entirely in your browser using client-side JavaScript. Nothing is sent to a server.