A linear gradient is a smooth blend between colors along a straight line. You hand CSS a direction and a few colors, and it paints the fade for you — no image file needed.
Where you meet it
- Hero backgrounds and glossy buttons — one line instead of an exported PNG.
- Soft fades over photos, so text on top stays readable.
- Gradient text, by clipping the fade to the letters with
background-clip: text.
What it does
It returns an image — a <gradient> is a special kind of CSS <image>. So it lives wherever CSS expects one, almost always background. It has no fixed size; it simply stretches to fill the element.
A gradient is an image, not a colour — that's why it goes on background, and why 0deg points up, not right.
How it works
The first value sets the direction, then comes a list of color stops. Angles run clockwise: 0deg points up, 90deg right, 180deg down. Keywords work too — to right, to bottom left. Each stop can take a position; CSS spaces the rest evenly and blends between them.
/* 45° fade, pink into cyan */
background: linear-gradient(45deg, #FF2E9A, #29D3D9);
/* explicit positions control the spread */
background: linear-gradient(to right, #FF2E9A 0%, #29D3D9 100%);
/* two stops at the same spot = a hard edge, no fade */
background: linear-gradient(to right, #FF2E9A 50%, #29D3D9 50%);Watch out
0degis up, not right — and the angle turns clockwise. Easy to get backwards.- A gradient is an image, so set it on
background(orbackground-image), notcolor. - Two stops at the same position give a crisp line; that's a feature, not a bug.
Go deeper
Ein linearer Verlauf ist ein weicher Übergang zwischen Farben entlang einer Geraden. Du gibst CSS eine Richtung und ein paar Farben, und es malt den Verlauf für dich — ganz ohne Bilddatei.
Wo es vorkommt
- Hero-Hintergründe und glänzende Buttons — eine Zeile statt einer exportierten PNG.
- Weiche Verläufe über Fotos, damit der Text darüber lesbar bleibt.
- Verlaufs-Text, indem man den Verlauf mit
background-clip: textauf die Buchstaben beschneidet.
Was es tut
Es liefert ein Bild — ein <gradient> ist eine besondere Art von CSS-<image>. Damit ist es überall nutzbar, wo CSS ein Bild erwartet, fast immer background. Es hat keine feste Größe und füllt einfach das Element.
Ein Verlauf ist ein Bild, keine Farbe — darum gehört er auf background, und darum zeigt 0deg nach oben, nicht nach rechts.
Wie es funktioniert
Der erste Wert legt die Richtung fest, danach folgt eine Liste von Color-Stops. Winkel laufen im Uhrzeigersinn: 0deg zeigt nach oben, 90deg nach rechts, 180deg nach unten. Auch Schlüsselwörter gehen — to right, to bottom left. Jeder Stop kann eine Position bekommen; den Rest verteilt CSS gleichmäßig und blendet dazwischen über.
/* 45°-Verlauf, Pink zu Cyan */
background: linear-gradient(45deg, #FF2E9A, #29D3D9);
/* explizite Positionen steuern die Verteilung */
background: linear-gradient(to right, #FF2E9A 0%, #29D3D9 100%);
/* zwei Stops an derselben Stelle = harte Kante, kein Übergang */
background: linear-gradient(to right, #FF2E9A 50%, #29D3D9 50%);Worauf achten
0degist oben, nicht rechts — und der Winkel dreht im Uhrzeigersinn. Schnell verwechselt.- Ein Verlauf ist ein Bild, gehört also auf
background(oderbackground-image), nicht aufcolor. - Zwei Stops an derselben Position ergeben eine scharfe Kante; das ist gewollt, kein Fehler.