CSS Gradients Explained: Linear, Radial and Conic

Gradients are everywhere — and easy to get wrong

Open almost any modern interface and you’ll find gradients: a hero background that fades from indigo to pink, a button with a subtle vertical sheen, a progress ring that sweeps through the spectrum. They’re one of the cheapest ways to add depth without shipping image files. Yet the CSS syntax trips people up constantly — which value is the angle, where the percentages go, why a radial gradient looks off-centre. This guide demystifies all three gradient types, and the Gradient Generator lets you design them by eye while you read.

Gradients are images, not colours

The first mental shift: a CSS gradient is a generated image, not a colour. That’s why you set it on background or background-image, never background-color. It also means you can stack gradients, mix them with photographs, and reuse them anywhere an image is allowed. Understanding this explains a lot of otherwise confusing behaviour — for instance, why a gradient ignores background-color entirely once it’s applied.

Colour stops: the heart of every gradient

Every gradient is built from colour stops. A stop is a colour paired with a position from 0% to 100% along the gradient line. With two stops the browser blends smoothly between them; add more and you create multi-colour transitions. Positions give you control over where each colour sits:

• #fff 0%, #000 100% fades white to black across the whole length.
• #fff 0%, #000 50% reaches black at the halfway point, then stays black.
• #fc466b 0%, #3f5efb 50%, #11998e 100% blends through three colours evenly.

If you omit positions, the browser distributes stops evenly. Being explicit, as the Gradient Generator is, makes the result predictable and easy to tweak.

Linear gradients

A linear gradient blends colours along a straight line at an angle you choose:

background: linear-gradient(90deg, #fc466b 0%, #3f5efb 100%);

The angle is where it confuses people. 0deg points upward, 90deg points to the right, 180deg points down, and 270deg to the left. So to right is the same as 90deg. Think of the angle as the direction the gradient travels toward, not where it starts. Once that clicks, directional fades become trivial: a top-to-bottom sheen is 180deg, a diagonal is 135deg.

Linear gradients are the workhorse — hero backgrounds, button fills, section dividers, text overlays. If you only learn one type well, make it this one.

Radial gradients

A radial gradient spreads outward from a centre point, like a glow or spotlight:

background: radial-gradient(circle at center, #f093fb 0%, #f5576c 100%);

Two extra choices shape it. The shape is circle (uniform in every direction) or ellipse (stretches to fill a rectangle). The position sets the centre — center, top left, bottom right, and so on. A radial gradient positioned at top left creates a light source in that corner, which is a classic way to fake soft lighting on a card. Reach for radial gradients when you want emphasis to radiate from a point rather than travel in a straight line.

Conic gradients

A conic gradient sweeps colours around a centre point, like the hands of a clock:

background: conic-gradient(from 0deg at center, #fc466b 0%, #3f5efb 50%, #11998e 100%);

The from angle sets where the sweep begins, and the position sets the centre. Conic gradients are what make pure-CSS pie charts, colour wheels, loading spinners, and angular accents possible. They were the last of the three to arrive in browsers but are now well supported. Because they’re less familiar, a visual tool helps enormously — nudge the from-angle in the Gradient Generator and watch the wheel rotate.

Shipping gradients safely: the fallback

Older browsers that don’t understand a gradient function simply ignore the declaration, leaving an element with no background at all. The fix is a one-line fallback: declare a solid colour first, then the gradient.

background-color: #fc466b;        /* fallback for ancient browsers */
background: linear-gradient(90deg, #fc466b 0%, #3f5efb 100%);

Browsers that understand the gradient use it; those that don’t fall back to the solid colour. It costs nothing and prevents an invisible background in the rare case something goes wrong. The generator emits this pair for you so you never forget it.

Performance and accessibility notes

Gradients render on the GPU and are far lighter than image files, but a few habits keep things clean. Don’t animate the gradient itself on large surfaces — animate transform or opacity on a layer instead. Keep enough contrast between any text and the lightest part of a gradient; a fade that’s readable at one end can fail at the other. And remember that very busy multi-stop gradients behind text hurt legibility — when in doubt, simpler reads better.

A quick workflow

1. Pick the type that matches the effect — linear for direction, radial for a glow, conic for a sweep.
2. Choose two or three colours; more than four rarely helps.
3. Set positions so the transition lands where you want it.
4. Copy the CSS with the solid fallback included.
5. Paste, then adjust the angle or position live until it feels right.

That loop takes seconds in the Gradient Generator, and the output is plain, standards-based CSS you can drop into any project.

Combining and layering gradients

One of the most useful tricks is that a single element can hold several gradients at once, separated by commas. Because each gradient is an image, the first one listed sits on top. Stacking a steep, mostly-transparent gradient over a solid one creates subtle sheens and glassy highlights without any image assets:

background:
  linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 40%),
  linear-gradient(135deg, #fc466b 0%, #3f5efb 100%);

The top layer adds a soft highlight near the top; the bottom layer is the main colour fade. The same approach layers a gradient over a photograph to keep overlaid text readable — a dark-to-transparent gradient on top of an image is the classic “scrim” pattern. Once you think of gradients as stackable images rather than flat colours, a lot of polished UI effects become a couple of lines of CSS.

Hard stops and stripes

If two stops share the same position, the colour changes instantly instead of fading — a “hard stop”. That turns the gradient tool into a way to make stripes, colour blocks, and progress bars:

background: linear-gradient(90deg, #11998e 0% 50%, #38ef7d 50% 100%);

This paints the left half teal and the right half green with a crisp edge. Repeating hard stops build candy-stripe patterns. It’s a neat reminder that “gradient” doesn’t always mean a soft blend — the same syntax covers sharp transitions too.

Where to go next

If you mainly need linear and radial fades with a focused interface, the companion CSS gradient generator guide covers those in depth. Pair gradients with a soft box-shadow and you have the foundation of a modern card style — design once, copy the code, and move on.