CSS Generators·4 min read

CSS Gradient Syntax Explained: Linear, Radial, Conic

Every gradient on the web reduces to one CSS function with a direction and a list of color stops, yet the syntax still trips up experienced developers. Consider this css gradient syntax explained properly: how linear-gradient, radial-gradient, and conic-gradient differ, what the angle actually points at, how stop positions behave, and where hard edges come from. You'll get real values to paste and adjust, the mistakes that produce muddy or banded results, and a look at how the CSS Gradient Generator turns the whole exercise into dragging sliders.

Open the tool All insights

Where CSS gradients earn their place

No image files, infinite resolution.

Gradients show up the moment a design stops being flat: hero backgrounds, primary buttons, progress bars, skeleton loaders, chart fills, and the glow behind pricing cards. A designer hands you a Figma frame with a violet fade and expects the browser version to match it exactly, which means you need the syntax, not a screenshot.

The payoff for writing it in CSS is real. A gradient costs zero image bytes, renders sharp on any display density, and repaints for free when the element resizes. An exported PNG of the same fade would weigh kilobytes and band visibly on wide screens.

CSS gradient syntax explained from the ground up

One function, three geometries.

All three types share a shape: a function name, an optional direction, then comma-separated color stops. The choice of linear vs radial vs conic decides the geometry. linear-gradient() blends along a straight line, radial-gradient() radiates from a center point outward, and conic-gradient() sweeps colors around the center like a clock hand.

Direction is where most confusion lives. For linear gradients, 0deg points up and angles rotate clockwise, so 90deg runs left to right and 135deg runs top left to bottom right. Radial gradients take a shape keyword instead, such as radial-gradient(circle, ...). Conic gradients accept a starting rotation written as conic-gradient(from 135deg, ...), after which stops are distributed around the circle.

A worked two-stop linear gradient

Read it token by token.

Here's the default the CSS Gradient Generator starts with: background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);. The angle sends the blend diagonally. The first stop pins indigo at the starting edge, the second pins violet at the far edge, and the browser interpolates every pixel in between.

Positions are optional; linear-gradient(135deg, #6366F1, #8B5CF6) produces the same result because the first and last stops default to 0% and 100%. Writing them explicitly matters once a third color enters, since linear-gradient(135deg, #6366F1 0%, #EC4899 30%, #8B5CF6 100%) pulls the pink transition toward the start instead of the middle.

Gradient stops and hard edges

Same syntax, opposite effect.

A stop's position marks where its color is pure; between two stops the browser blends. Push two positions together and the blend zone shrinks. Make them equal and it vanishes entirely: linear-gradient(90deg, #6366F1 50%, #8B5CF6 50%) renders a crisp two-tone split with no fade at all.

That trick powers stripes, split-screen layouts, and flag-style backgrounds without a single image. In the generator, set two adjacent stops to the same percentage in their position fields and you'll see the seam appear in the preview. With up to six stops available, you can alternate pairs to build multi-band patterns.

Gradient mistakes that muddy the result

The usual suspects.

Most bad gradients come from a short list of causes, and every one of them is cheap to fix once you can name it.

Blending complementary hues directly. Blue into orange passes through gray mud at the midpoint; add an intermediate stop in a deliberate hue to route around it.
Assuming 0deg points right. It points up, so a gradient you meant to run horizontally ends up vertical until you write 90deg.
Stretching high-contrast stops across a huge area, which invites visible banding on 8-bit displays. Closer hues or extra stops smooth it out.
Putting text over a fade and checking contrast against only one end. The other end is usually where it fails.
Forgetting that percentages in a radial gradient measure distance from the center, so a stop at 50% sits halfway to the edge, not halfway across the element.

Three habits for cleaner CSS gradients

Small rules, better fades.

First, pick neighboring hues. Indigo to violet, teal to blue, orange to pink: colors close on the wheel blend cleanly without a gray trough, which is why so many polished interfaces stay inside one hue family.

Second, keep 135deg as your default diagonal, since it matches the top-left lighting convention interfaces already use. Third, write stop positions explicitly once you pass two colors. Future you, reading linear-gradient(135deg, #6366F1 0%, #EC4899 30%, #8B5CF6 100%), can see the design intent in the numbers.

CSS Gradient Generator or a different tool

Pick by what you're holding.

Reach for the CSS Gradient Generator when you're composing a new fade from scratch, since the tabs, angle slider, and per-stop controls map one-to-one onto the syntax above. If you already have gradient code and just want to see and tweak it quickly, Gradient Preview is the lighter-weight stop.

Gradients also feed other effects on this site. The CSS Glassmorphism Generator renders its frosted panel over a vivid gradient because that's the backdrop the effect needs, so building the gradient here first and layering glass on top is a natural pairing.

Try it now

Open CSS Gradient Generator

The tool is one click away. No sign up, no upload, no payment.

Open CSS Gradient Generator

Write a review