Gradients are the most code-hostile property in CSS: a visual idea, “fade from this blue to that purple, diagonally”, that must be expressed as an angle, a comma list of color stops, and percentages nobody gets right on the first try. They are also free decoration, zero bytes of image download for backgrounds that used to require Photoshop. This guide covers the three gradient types and the craft details that separate smooth from muddy, with our free CSS gradient generator as the place where the syntax writes itself.
In this guide
Linear gradients: angles and stops
linear-gradient(135deg, #2563eb, #9333ea) reads: travel at 135 degrees, start at the blue, end at the purple. The angle convention trips everyone once: 0deg points up, 90deg points right, and the default, when you write no direction at all, is 180deg, top to bottom. Keyword directions (to right, to bottom left) survive in old code and read nicely, but degrees are what the slider in the generator produces and what allows the in-between diagonals that look deliberate rather than default. One subtlety worth knowing: to top right and 45deg are not the same gradient on a non-square element, because the keyword aims at the literal corner while the degree value holds its angle regardless of the box’s proportions.
Radial gradients: from a point outward
radial-gradient(circle at center, #fbbf24, #b45309) radiates color from a point instead of along a line. The two decisions are shape, circle or ellipse (the default ellipse stretches with the box), and position, which accepts the same values as background-position, so at 30% 20% puts the hotspot off-center. That off-center hotspot is the working trick: a subtle radial gradient lighter at the top third of a panel reads as ambient lighting rather than decoration, which is most of what radial gradients are quietly used for in modern interfaces, spotlight effects and soft vignettes rather than the bullseyes the syntax suggests.
Conic gradients: around the clock
The newest member sweeps color around a center point like a clock hand: conic-gradient(red, yellow, green, red) produces a color wheel, repeating the first color at the end so the seam at 12 o’clock disappears. Conic gradients have one famous practical job: pie charts in pure CSS, built from hard stops, conic-gradient(#2563eb 0 40%, #e5e7eb 40% 100%) being a 40% progress donut once a mask hollows the middle. They also produce the checkered and starburst patterns of CSS-trickery fame, but the pie and the wheel are the two forms that earn a place in real projects.
Color stops: the real control surface
Every gradient type shares the same stop grammar, and three of its rules do most of the work. Unpositioned stops distribute evenly: three colors land at 0%, 50%, 100%, which is why hand-written gradients all have that identical balanced look. Positioned stops move the action: #2563eb 0%, #9333ea 30%, #ec4899 100% front-loads the blue-purple transition and lets the pink breathe across the remaining 70%, the asymmetry that makes a gradient look designed. Two stops at the same position create a hard edge: black 50%, white 50% is a crisp split, not a fade, and repeating that pattern is how stripes, flags and the pie charts above are painted. Drag stops in the generator and watch the percentages update; the grammar internalizes in minutes.
Why gradients look muddy or stripey, and the fixes
Two failure modes account for nearly every bad gradient. The gray dead zone: fading between distant hues, blue to yellow being the classic, drags the transition through desaturated middle territory, because the math averages the colors channel by channel. The fix is routing the journey: insert an intermediate stop of a vivid color that sits between them on the color wheel (blue through teal or green to yellow), and the mud disappears. Banding: a long, slow gradient between two close colors shows visible stripes, since the distance offers more pixels than there are distinguishable shades between the endpoints. The fixes are increasing the color distance, shortening the gradient, or accepting that a five-percent-lightness fade across an entire viewport is asking for more shades than displays can deliver. And when the goal is recoloring an existing image rather than painting fresh color, that is a different instrument: the CSS filter generator handles brightness, saturation and hue rotation on what is already there. The rest of the visual toolbox lives in the CSS generators pillar.
Frequently asked questions
Can I put a gradient on text?
Yes, with the clip trick: paint the gradient as the text’s background, then clip the background to the glyph shapes with background-clip: text and transparent text color. It is well supported in current browsers and remains the one place gradient text is respectable.
Can gradients be animated?
Not directly, since browsers cannot transition between two gradient images, but two workarounds cover practice: animate background-position over an oversized gradient for the drifting-color effect, or transition the colors themselves via CSS custom properties registered with @property in browsers that support it.
Do gradients cost performance like images do?
They cost no download at all, which is their headline advantage, and rendering is cheap for static use. The exception is animating anything that forces constant repaints of a large gradient area; like shadows, paint once and move the element rather than repainting the paint.
Why does my gradient show a visible line where it repeats?
Because the last color does not match the first. Tiled use, via repeating-linear-gradient or background-repeat, needs the loop closed: end on the color you started with, the same rule the conic color wheel uses to hide its seam.