CSS Gradients: Linear, Radial and Conic (Guide With Examples)

CSS gradients let you create smooth color transitions without images, directly with code. They're lightweight, scale perfectly and are used in backgrounds, buttons, cards and modern effects. This guide covers the three types with examples.

What is a CSS gradient

A gradient is a gradual transition between two or more colors. In CSS it's generated with functions used as a background image (background-image or background), so you don't need files: it's all code the browser draws.

Linear gradient (linear-gradient)

The most common: colors flow in a straight line, in one direction.

background: linear-gradient(to right, #3b82f6, #8b5cf6);

Direction: you can use words (to right, to bottom) or an angle (90deg, 45deg). 0deg is upward, 90deg to the right.
Multiple colors: add as many as you want separated by commas.

background: linear-gradient(45deg, #f59e0b, #ef4444, #8b5cf6);

Radial gradient (radial-gradient)

Colors radiate from a central point outward, in a circle or ellipse.

background: radial-gradient(circle, #3b82f6, #1e293b);

Useful for light spots, vignettes or backgrounds with depth. You can control the shape (circle/ellipse) and the center position (at top left).

Conic gradient (conic-gradient)

Colors rotate around a point, like clock hands. Perfect for color wheels, pie charts or circular effects.

background: conic-gradient(from 0deg, #ef4444, #f59e0b, #10b981, #ef4444);

Color stops

You can control where each color happens by adding a percentage:

background: linear-gradient(to right, #3b82f6 0%, #3b82f6 40%, #8b5cf6 100%);

Here blue takes the first 40% and then transitions. If you put two colors at the same position, you create a hard transition (solid bands instead of a gradient).

Transparency in gradients

Use colors with alpha (rgba or 8-digit HEX) for gradients that fade out, ideal for overlaying text on images:

background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);

Creating these gradients by hand, adjusting angles and stops, is slow. You can do it visually with the CSS gradient generator on this site and copy the ready code.

Practical tips

Soften with nearby colors in hue for elegant gradients; very opposite colors can look harsh.
Gradients on text: combine background-clip: text for gradient text.
Performance: gradients are lightweight, but animating them is costly; animate opacity or transform instead.

Frequently asked questions

Do gradients work in all browsers? linear and radial do, widely. conic-gradient has good modern support but check if you need very old browsers.

Can I animate a gradient? Not directly in an efficient way; the usual trick is animating the background-position of a large gradient.

How many colors can I use? As many as you want, but 2-4 usually suffices for a clean result.

Is my data uploaded? No, if you use a local generator. Everything happens in your browser.

Create linear, radial and conic gradients visually with the free CSS gradient generator and copy the code instantly.