Searching for how to build a gradient in CSS sometimes leads to documentation talking about a <linearGradient> tag nested inside <defs>. That is not a search mistake: it is an entirely different mechanism, native to SVG, which shares almost nothing with the CSS gradient beyond an almost identical name.
The gradient covered here is a CSS function, not a tag. It is declared in one line and works on any HTML element.
Definition
linear-gradient() and radial-gradient() are functions that produce an image generated by the browser, with no file to load. They are used as a value for background-image, in exactly the same spot as a url(): there is no dedicated property for gradients, they are just values like any other. A third function, conic-gradient(), rotates colors around a point instead of progressing them in a line or a circle, which makes it handy for circular progress indicators.
.banner {
background-image: linear-gradient(90deg, #6366f1, #ec4899);
}
.bubble {
background-image: radial-gradient(circle, #fde68a, #f59e0b);
}Color stops
A gradient accepts as many colors as needed, and each one can carry an explicit position as a percentage. Without a position, colors spread out evenly. Repeating the same position twice for two different colors removes the transition entirely and leaves a hard band instead, a technique used to fake stripes or clean-cut zones with no blending.
.three-colors {
background-image: linear-gradient(
90deg,
#6366f1 0%,
#a855f7 50%,
#ec4899 100%
);
}
.stripes {
background-image: linear-gradient(
45deg,
#f1f5f9 25%,
#e2e8f0 25%,
#e2e8f0 50%,
#f1f5f9 50%
);
background-size: 20px 20px;
}Angle and direction
linear-gradient() accepts an angle in degrees, with 0deg pointing up and increasing clockwise, or a keyword like to right, to bottom left. With no angle given, the default value is to bottom. radial-gradient() instead accepts a shape (circle or ellipse) and a starting position, centered on the element by default.
The name trap: it is not SVG's <linearGradient>
SVG has its own <linearGradient> and <radialGradient> elements, declared inside a <defs> block and referenced elsewhere with fill="url(#myGradient)". It is a full XML syntax, built for precise vector shapes, and it has no technical relationship whatsoever to the CSS functions despite the near-identical names. The CSS gradient, on the other hand, needs no separate definition and no reference: it is declared directly inside the property that uses it.
<defs> and <stop> tags, that is SVG, not CSS. For a plain HTML section background, skip those results and search for linear-gradient or radial-gradient instead.Combining a gradient with a fallback color
On an old browser, or during a very fast load, planning a solid CSS color as a fallback remains good practice, declared before the gradient inside the background shorthand: the browser applies the last value it understands, which guarantees a correct background even if the gradient syntax fails for some reason.
Frequently asked questions
Yes, by giving one or more colors a value with an alpha channel, such as rgba(0, 0, 0, 0) for a fully transparent stop. This is the technique used to progressively darken the bottom of an image without ever fully hiding what sits beneath it.
radial-gradient start from the element's center?Because a starting position was likely specified, for example radial-gradient(circle at top left, ...). Without a position keyword, a radial gradient is always centered by default on the element carrying it.
Yes, with a slightly roundabout combination: declare the gradient as background-image on the text, add background-clip: text so the fill hugs the exact shape of the letters, then set color to transparent to let the gradient show through the text.