Welcher Winkel für linear-gradient ist richtig?

0deg ist von unten nach oben, 180deg von oben nach unten, 90deg von links nach rechts. Diagonal beliebt: 135deg . Für RTL-fähige Designs lieber Keywords wie to top right nutzen.

Wieso werden Verläufe in der Mitte grau?

Klassische sRGB-Interpolation mischt linear, was bei komplementären Farben graue Zwischentöne erzeugt. Lösung: Zwischen-Color-Stop einfügen oder modernes linear-gradient(in oklch, ...) in unterstützten Browsern verwenden.

Was ist der Unterschied zwischen linear- und radial-gradient?

linear-gradient folgt einer Achse mit definiertem Winkel, radial-gradient strahlt vom Mittelpunkt aus. radial passt für Spotlights, Glows und Mesh-Effekte; linear für klassische Hintergründe und Buttons.

Kann ich mehrere Gradients übereinander legen?

Ja, kommagetrennt in background . Die zuerst genannten liegen oben. Beispiel: background: radial-gradient(at top, #fff5, transparent 50%), linear-gradient(135deg, #0d9488, #0ea5e9); für Marken-Verlauf mit Glanz-Highlight.

Sind CSS-Gradients besser als ein JPG-Hintergrund?

Ja, fast immer: kein Netzwerk-Request, perfekte Skalierung auf High-DPI, animierbar, kleinere Seitengröße. Nur bei sehr komplexen Mesh-Verläufen mit vielen Farbübergängen kann ein optimiertes WebP-Bild kleiner sein.

Wie animiere ich einen Gradient?

Direkte Animation von background ist teuer. Mache den Gradient größer als das Element ( background-size: 200% 200% ) und animiere background-position — der Browser malt nur einen Bildausschnitt um. Alternativ ein gradient-tragendes Element mit transform verschieben.

CSS Gradient Generator

Erstelle lineare und radiale CSS-Gradients visuell mit Live-Vorschau.

Typ

Winkel: {{ angle }}°

Form

Farb-Stops

{{ stop.position }}%

Presets

CSS Code

{{ cssOutput }}

Was ist ein CSS Gradient?

CSS Gradients erzeugen fließende Farbverläufe zwischen zwei oder mehr Farben. Sie werden häufig als Hintergründe für Buttons, Header, Hero-Sections und dekorative Elemente eingesetzt. Mit linear-gradient() erstellst du geradlinige Verläufe in beliebigem Winkel, mit radial-gradient() kreisförmige oder elliptische Verläufe.

Linear vs. Radial Gradient

Linear Gradient verläuft entlang einer geraden Achse — von oben nach unten, links nach rechts oder in jedem beliebigen Winkel. Radial Gradient strahlt von einem Mittelpunkt nach außen, entweder als Kreis oder Ellipse. Beide Typen unterstützen beliebig viele Farb-Stops mit einstellbarer Position.

Tipps für schöne Gradients

Verwende maximal 2–3 Farben für einen cleanen Look.
Ähnliche Farbtöne (z.B. Blau → Teal) wirken harmonisch.
Setze Farb-Stops nicht zu nah beieinander, um harte Kanten zu vermeiden.
Teste den Gradient auf verschiedenen Bildschirmgrößen.

CSS-Gradients: linear, radial, conic, repeating

Das CSS Images Module Level 3 spezifiziert die vier Funktionen linear-gradient(), radial-gradient(), conic-gradient() und deren repeating-*-Varianten. Linear-Gradients folgen einer Achse, deren Winkel mit 0deg (von unten nach oben) startet und im Uhrzeigersinn weitergeht — 90deg verläuft von links nach rechts, 180deg von oben nach unten, 270deg von rechts nach links. Statt eines Winkels akzeptiert die Funktion auch Schlüsselwörter wie to top right, was robuster gegen RTL-Layout ist.

Radial-Gradients strahlen von einem Mittelpunkt aus. Form (circle oder ellipse) und Größe (closest-side, farthest-corner etc.) bestimmen die Verteilung. Conic-Gradients drehen sich um einen Punkt — perfekt für Pie-Charts, Color-Wheel-Icons und gleichmäßige Farbkreise. Beispiel: conic-gradient(from 0deg, red, yellow, green, blue, red) erzeugt ein Farbrad ohne SVG. Repeating-Gradients wiederholen das Muster mit konstanten Abständen, ideal für gestreifte Hintergründe und Schraffuren.

Color Stops bestimmen, wo eine Farbe ihren Spitzenwert erreicht. Ohne explizite Position werden Stops gleichmäßig verteilt. linear-gradient(135deg, #0d9488 0%, #0ea5e9 100%) ist der CalcSI-Standard-Verlauf. Mit zwei Positions-Werten pro Stop entstehen harte Kanten: linear-gradient(90deg, red 0 50%, blue 50% 100%) ist ein gestreifter Hintergrund ohne Übergang. CSS Color Module 4 erlaubt heute auch Gradient-Interpolation im OKLCH-Raum: linear-gradient(in oklch, red, blue) vermeidet die typischen grauen Zwischentöne klassischer RGB-Verläufe.

So baust du saubere Verläufe

Gradient-Design ist Komposition: Wenige bewusste Schritte führen zu professionellen Ergebnissen, viele wilde Stops zu Disco-Optik.

Beginne mit einem 2-Farben-Linear-Gradient bei 135°. Das ist der diagonale Klassiker und passt zu fast jedem Hero-Bereich.
Wähle Stop-Farben mit ähnlicher Sättigung und Lightness — eine Marken-Teal #0d9488 und ein nahes Blau #0ea5e9 sind angenehmer als komplementäre Knaller-Kombinationen.
Füge einen mittleren Color-Stop hinzu, falls der direkte Übergang grau wirkt. Beispiel: linear-gradient(135deg, #0d9488 0%, #14b8a6 50%, #0ea5e9 100%) mit Teal-Zwischenstop vermeidet die übliche RGB-Schmutzphase.
Teste verschiedene Winkel — 0°, 45°, 90°, 135° und 180° decken die meisten Designs ab. Asymmetrische Winkel (z. B. 23°) wirken oft unbeabsichtigt schief; lass sie für Spezialeffekte.
Wechsle für Spotlight-Effekte zu Radial. Ein heller Mittelpunkt zu transparentem Rand (radial-gradient(circle at center, rgba(255,255,255,0.4), transparent 70%)) erzeugt einen weichen Glanz auf Cards.

Konkrete Gradient-Beispiele

Diese Snippets sind direkt einsetzbar — Stripe, Linear und Vercel nutzen sehr ähnliche Strukturen.

CalcSI Hero: background: linear-gradient(135deg, #0d9488 0%, #0ea5e9 100%); — Teal nach Sky-Blue.
Stripe-Style Button: background: linear-gradient(180deg, #635bff 0%, #5b54f0 100%); mit box-shadow: 0 4px 12px rgba(99,91,255,0.35);.
Subtle Mesh: background: radial-gradient(at 0% 0%, #0ea5e933, transparent 50%), radial-gradient(at 100% 100%, #0d948833, transparent 50%); — moderner Layered-Look.
Conic Pie: background: conic-gradient(#0d9488 0 25%, #0ea5e9 25% 60%, #f59e0b 60% 100%); — sofortiges Pie-Chart ohne SVG.
Repeating Stripes: background: repeating-linear-gradient(45deg, #f3f4f6 0 10px, #e5e7eb 10px 20px); für dezente Diagonal-Hintergründe.

Grenzen und Performance

Gradients werden vom Browser als Bilder behandelt — sie können daher in background-image, aber nicht direkt in color stehen. Performance ist auf Desktop unkritisch; jeder Gradient wird einmal in eine Textur gerendert und vom Compositor wiederverwendet. Animierte Gradients (z. B. background-position-Shift) sind jedoch teuer, weil der Browser die Bitmap bei jedem Frame neu malt — nutze stattdessen transform: translateX() auf einem statischen Gradient-Layer. Color Banding (sichtbare Stufen statt sanftem Übergang) tritt bei extremen Lightness-Sprüngen über kurze Distanzen auf — vermeide es mit Zwischenstops oder durch linear-gradient(in oklch, ...). Auf Druckseiten werden Gradients oft als grobes Raster gedruckt; teste mit echtem Drucker oder PDF-Preview. Beim Generieren von Markenfarben darauf achten, dass die mittlere Achse nicht grau wird — zwei Farben mit gleichem Hue (Teal + Sky) sind sicherer als Komplementärfarben (Teal + Magenta). Schließlich: Auch der schönste Gradient ist nur Hintergrund. Text auf einem Gradient muss WCAG AA gegen die schlechtere Stelle erreichen, nicht gegen den Durchschnitt.

Häufige Fragen zu CSS-Gradients

Welcher Winkel für linear-gradient ist richtig?: 0deg ist von unten nach oben, 180deg von oben nach unten, 90deg von links nach rechts. Diagonal beliebt: 135deg. Für RTL-fähige Designs lieber Keywords wie to top right nutzen.
Wieso werden Verläufe in der Mitte grau?: Klassische sRGB-Interpolation mischt linear, was bei komplementären Farben graue Zwischentöne erzeugt. Lösung: Zwischen-Color-Stop einfügen oder modernes linear-gradient(in oklch, ...) in unterstützten Browsern verwenden.
Was ist der Unterschied zwischen linear- und radial-gradient?: linear-gradient folgt einer Achse mit definiertem Winkel, radial-gradient strahlt vom Mittelpunkt aus. radial passt für Spotlights, Glows und Mesh-Effekte; linear für klassische Hintergründe und Buttons.
Kann ich mehrere Gradients übereinander legen?: Ja, kommagetrennt in background. Die zuerst genannten liegen oben. Beispiel: background: radial-gradient(at top, #fff5, transparent 50%), linear-gradient(135deg, #0d9488, #0ea5e9); für Marken-Verlauf mit Glanz-Highlight.
Sind CSS-Gradients besser als ein JPG-Hintergrund?: Ja, fast immer: kein Netzwerk-Request, perfekte Skalierung auf High-DPI, animierbar, kleinere Seitengröße. Nur bei sehr komplexen Mesh-Verläufen mit vielen Farbübergängen kann ein optimiertes WebP-Bild kleiner sein.
Wie animiere ich einen Gradient?: Direkte Animation von background ist teuer. Mache den Gradient größer als das Element (background-size: 200% 200%) und animiere background-position — der Browser malt nur einen Bildausschnitt um. Alternativ ein gradient-tragendes Element mit transform verschieben.