A gradient is the cheapest visual upgrade in web design: no image files, no downloads, no plugins — just a line of CSS that blends one color into another. Yet most developers use only the simplest form. Here is the full toolkit, from basic fades to the layered effects behind modern buttons and cards.
What a gradient actually is
In CSS, a gradient is technically an image — but one the browser paints mathematically instead of downloading. You describe the colors and how they transition, and the browser fills the element with the result. Because no file is involved, gradients are resolution-independent: they look sharp on any screen, at any size, and they add zero bytes to your page weight.
There are three gradient functions, and each paints in a different shape. linear-gradient() blends along a straight line. radial-gradient() blends outward from a center point. conic-gradient() sweeps colors around a center like a pie chart. Linear covers most everyday needs; radial handles glows and vignettes; conic is the specialist for pie charts, color wheels, and checkerboard patterns.
Linear gradients: direction and angles
The simplest linear gradient needs just two colors: linear-gradient(#4f46e5, #06b6d4) fades from indigo at the top to cyan at the bottom, because the default direction is top to bottom. Add a direction keyword to change it: to right, to bottom right, and so on.
For precise control, use an angle instead of a keyword: linear-gradient(135deg, #4f46e5, #06b6d4) runs diagonally from the bottom-left toward the top-right. Angles are measured clockwise from straight up, so 0deg points up, 90deg points right, and 180deg points down — which matches the default. A 135-degree diagonal is the workhorse angle for buttons and hero sections because it feels dynamic without being distracting.
One habit worth building: always put a solid fallback color before the gradient, like background: #4f46e5; background: linear-gradient(...). Ancient browsers ignore the gradient line and keep the solid color, so nothing ever breaks.
Color stops: where colors change
With two colors and no positions, the blend runs evenly across the whole element. Color stops let you decide exactly where each color sits. Write linear-gradient(to right, #ef4444 0%, #f59e0b 50%, #10b981 100%) and the gradient hits red at the left edge, amber dead center, and green at the right edge, blending between each pair.
Stops do not have to be evenly spaced, and that is where the interesting effects live. Put two stops close together — say #f59e0b at 48% and #10b981 at 52% — and the blend between them is compressed into a thin, almost-sharp band. Push two stops to the exact same position and the blend disappears entirely: that is a hard stop, and it is the secret behind stripes, progress bars, and split-color backgrounds made with pure CSS.
You can also let a color fade into transparency by using an rgba value or the transparent keyword as a stop. Fading a color into transparency over a photo or a pattern is how designers create readable text overlays without darkening the whole image.
Radial gradients: circles and ellipses
Radial gradients radiate from a point. By default the shape is an ellipse that fills the element, centered in the middle: radial-gradient(#fde68a, #f59e0b) gives a warm glow that is brightest at the center and deepens toward the edges. Add circle to force a true circle, and add a position like at top left to move the center — perfect for a light source effect in a card corner.
Radial gradients also take size keywords. closest-side stops the gradient at the nearest edge, producing a tight glow; farthest-corner, the default, stretches it to the farthest corner for a full-bleed effect. A vignette — darkened edges with a bright center — is just a radial gradient from transparent to a translucent black, layered over an image.
Hard stops and striped effects
Hard stops deserve their own section because they unlock effects people assume need images. Repeating a pair of hard stops with repeating-linear-gradient() makes stripes: repeating-linear-gradient(45deg, #4f46e5 0 10px, #ffffff 10px 20px) paints diagonal candy stripes ten pixels wide, forever, with no image and no extra markup.
The same trick builds progress bars (a hard stop at the completion percentage), skeleton loading shimmer (a soft gradient swept across), and duotone photo treatments (a gradient layered over a grayscale image with a blend mode). Once you think of gradients as paint rather than decoration, whole categories of image assets become unnecessary.
Worked example: a button and a card
Put it together with two components you can copy. First, a button with depth: a 135-degree gradient from a lighter shade to a darker shade of the same hue, plus a subtle inner highlight. The gradient does the shading work that once required a background image, and it scales to any button size for free.
Second, a card with a glow: a radial highlight positioned at the top-left corner, layered over a soft linear background. The radial part draws the eye to the corner; the linear part keeps the card grounded. Two gradients, one background property with a comma between them — CSS layers gradients in order, first listed on top.
Both examples share one rule: restraint. Gradients look premium when the colors are close relatives or share a hue family. Rainbow gradients across the full spectrum are the fastest way to make a design look dated. Pick two or three harmonious colors, let the stops do the work, and stop there.
Frequently asked questions
Do CSS gradients work in all browsers?
Linear and radial gradients work in all modern browsers without prefixes, and have for years. Conic gradients are also broadly supported now. You only need vendor prefixes if you must support very old browsers, which most projects no longer do.
Do gradients slow down a web page?
No, not in any way you would notice. The browser renders gradients mathematically at paint time, so they cost far less than an image file of the same size and need no download at all. A page full of gradients still loads faster than one full of background images.
Can I animate a CSS gradient?
Not directly — browsers cannot transition between two different gradient values the way they transition colors. The usual workaround is to layer two gradients and fade the top one's opacity, or to animate background-position on a gradient that is larger than its element.
What is the difference between linear and radial gradients?
A linear gradient blends colors along a straight line — top to bottom, left to right, or at an angle. A radial gradient blends outward from a center point in a circle or ellipse, like a spotlight. Use linear for backgrounds and buttons, radial for glows, vignettes, and focal points.