Wie Sie CSS-Verläufe erstellen

CSS-Verläufe ermöglichen es Ihnen, sanfte Farbübergänge ohne Bilddateien zu erstellen. Sie sind leichter als Bilder, skalieren perfekt für jede Bildschirmgröße und sind einfach anzupassen. Ein typischer dekorativer Verlauf spart 20-100 KB im Vergleich zu einer entsprechenden JPG oder PNG und skaliert ohne Qualitätsverlust auf jede Auflösung.

Arten von CSS-Verläufen

Linearer Verlauf: Farben gehen in einer geraden Linie ineinander über (von oben nach unten, von links nach rechts oder in jedem Winkel).

background: linear-gradient(135deg, #667eea, #764ba2);

Radialer Verlauf: Farben strahlen von einem Mittelpunkt nach außen in einem kreisförmigen oder elliptischen Muster aus.

background: radial-gradient(circle, #667eea, #764ba2);

Konischer Verlauf: Farben drehen sich um einen Mittelpunkt wie ein Farbkreis.

background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);

So erstellen Sie Verläufe visuell

1. Wählen Sie den Verlaufstyp: Wählen Sie linear oder radial und legen Sie den Winkel oder die Position fest.
2. Fügen Sie Farbstopps hinzu: Klicken Sie, um Farben an verschiedenen Positionen entlang des Verlaufs hinzuzufügen. Passen Sie jede Farbe und ihre Position an.
3. Kopieren Sie das CSS: Kopieren Sie den generierten Code und fügen Sie ihn in Ihr Stylesheet ein.

Die Verwendung eines visuellen Generators ist schneller als das Schreiben der Verlaufssyntax von Hand, insbesondere wenn Sie mit mehreren Farbstopps experimentieren.

Eine kurze Geschichte der CSS-Verläufe

Vor der Existenz von CSS-Verläufen mussten Webdesigner Hintergrundbilder für jeden Verlaufseffekt verwenden: ein einspaltiges GIF horizontal kacheln oder ein Photoshop-PSD in mehrere JPGs zerschneiden. Dies funktionierte, fügte aber Dateigewicht, Netzwerkanfragen und Pixelierung beim Zoomen hinzu.

WebKit fügte die erste -webkit-gradient()-Implementierung in Safari 4 (Juni 2009) mit einer ausführlichen, schwer lesbaren Syntax hinzu. Firefox 3.6 (Januar 2010) folgte mit -moz-linear-gradient(). Die CSS Working Group standardisierte das unpräfixierte linear-gradient() und radial-gradient() in CSS Image Values Level 3 (2012), woraufhin Browser-Präfixe zu verschwinden begannen.

Konische Verläufe (conic-gradient()) kamen viel später, erstmals in Chrome 69 (September 2018) und erreichten alle wichtigen Browser mit Safari 12.1 (März 2019). Sie ermöglichen visuelle Muster, die zuvor ohne Bilder unmöglich waren: Tortendiagramme, Farbkreise, Schachbretter, Sonnenstrahlmuster.

CSS-Verläufe gelten heute als Baseline-Browserfunktionen. Fast jeder gewünschte Verlaufseffekt ist in CSS erreichbar, ohne dass Bilder oder JavaScript erforderlich sind.

Gängige Verlaufsmuster

Hintergrund eines Hero-Bereichs: Ein subtiler Zweifarbenverlauf fügt Tiefe hinzu, ohne vom Text abzulenken.

background: linear-gradient(135deg, #0f172a, #1e3a5f);

Schaltflächen-Hervorhebung: Ein leichter Verlauf lässt Schaltflächen dreidimensional erscheinen.

background: linear-gradient(180deg, #3b82f6, #2563eb);

Overlay auf Bildern: Ein Verlaufs-Overlay verbessert die Textlesbarkeit über Fotos.

background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));

Akzent-Rahmen: Verwenden Sie einen Verlauf als Rahmen für visuelles Interesse.

border-image: linear-gradient(90deg, #667eea, #764ba2) 1;

Animierter Mesh-Verlauf: Stapeln Sie mehrere radiale Verläufe und animieren Sie die Positionen.

background:
  radial-gradient(at 20% 30%, #667eea 0%, transparent 50%),
  radial-gradient(at 80% 70%, #764ba2 0%, transparent 50%),
  #0f172a;

Glas-Morphismus-Hintergrund: Kombinieren Sie einen Verlauf mit niedriger Deckkraft mit einer Backdrop-Filter-Unschärfe.

background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
backdrop-filter: blur(10px);

Positionierung der Farbstopps

Standardmäßig sind Farbstopps gleichmäßig verteilt. Sie können ihre Positionen überschreiben, um zu steuern, wo jede Farbe erscheint:

/* Gelb in der mittleren 60%, an den Rändern in Rot übergehend */
background: linear-gradient(90deg, red 0%, yellow 20%, yellow 80%, red 100%);

Sie können auch harte Stopps verwenden, um Streifen oder geometrische Muster ohne Kantenglättung zu erstellen:

/* Zweifarbige Streifen ohne Übergang */
background: linear-gradient(45deg, #667eea 50%, #764ba2 50%);

Der Trick besteht darin, zwei Farbstopps an derselben Position zu platzieren. Der Browser interpoliert nicht zwischen ihnen, was eine scharfe Kante erzeugt.

Wann Verläufe vs. einfarbige Farben vs. Bilder verwenden

• Einfarbige Farbe: am besten für primäre Oberflächenhintergründe (Karten, Modale, Navigation). Vorhersagbar und lesbar.
• CSS-Verlauf: am besten für dekorative Hintergründe, Hero-Bereiche, Schaltflächen-Hover-Zustände, Overlay-Effekte. Geringes Dateigewicht, skalierbar, animierbar.
• Hintergrundbild (JPG/PNG): am besten für fotografische Hintergründe oder komplexe Kunstwerke, die Verläufe nicht replizieren können.
• SVG-Verlauf: am besten, wenn Sie einen Verlauf als Teil eines Symbols oder einer Illustration benötigen, insbesondere wenn der Verlauf mit der SVG-Geometrie skalieren muss.

Ein gängiges Muster besteht darin, alle drei zu schichten: eine einfarbige Farbbasis, ein CSS-Verlaufs-Overlay und ein Texturbild mit niedriger Deckkraft obenauf.

Häufige Fallstricke

• Streifenbildung bei sanften Verläufen: Bei 8-Bit-Farbdisplays (älteren Monitoren, einigen mobilen Bildschirmen) können sanfte Verläufe mit ähnlichen Farben sichtbare Streifen zeigen. Das Hinzufügen einer subtilen Rauschtextur-Überlagerung reduziert dieses Artefakt.
• Verwirrung über den Verlaufswinkel: linear-gradient(0deg, ...) beginnt unten und geht nach oben; linear-gradient(90deg, ...) geht von links nach rechts; linear-gradient(180deg, ...) geht von oben nach unten. Der Winkel gibt die Richtung an, IN die der Verlauf fließt, nicht woher.
• Leistung mit vielen Stopps: Ein Verlauf mit 20+ Farbstopps verwendet mehr GPU-Speicher und kann das Scrollen auf Mobilgeräten verlangsamen. Für Mesh-Verlaufseffekte erzeugen oft 3-5 Stopps fast identische visuelle Ergebnisse mit viel besserer Leistung.
• Textkontrast über Verläufen: Eine Überschrift, die sich gut gegen den hellsten Teil des Verlaufs liest, kann über dem dunkelsten Teil unlesbar werden. Verwenden Sie die text-shadow-Eigenschaft oder einen dunklen Textumriss als Sicherheitsnetz.
• Kompatibilität mit älteren Browsern: Wenn Sie IE11 oder sehr alte mobile Browser unterstützen müssen, sind konische Verläufe nicht verfügbar. Lineare und radiale Verläufe funktionieren überall modern.
• Verlaufsrichtung in RTL-Sprachen: Ein Verlauf von links nach rechts in einem arabischen oder hebräischen Layout fließt aus der Perspektive des Lesers rückwärts. Testen Sie in beiden Richtungen oder verwenden Sie logische CSS-Eigenschaften.

Tipps

• Halten Sie es subtil: Die besten Verläufe sind kaum wahrnehmbar. Eine leichte Verschiebung zwischen zwei ähnlichen Farben fügt Tiefe hinzu. Dramatische Regenbogenverläufe sehen selten professionell aus.
• Verwenden Sie Verläufe anstelle von Bildern: Ein CSS-Verlauf wird sofort mit null Netzwerkanfragen geladen. Ersetzen Sie dekorative Hintergrundbilder durch Verläufe, wo möglich.
• Im Dunkelmodus testen: Verläufe, die auf einem hellen Hintergrund gut aussehen, können im Dunkelmodus verblassen oder kollidieren. Erwägen Sie, verschiedene Verläufe für jedes Thema zu definieren.
• Achten Sie auf den Textkontrast: Wenn Sie Text über einen Verlauf legen, überprüfen Sie, ob der Text über die gesamte Verlaufsspanne lesbar ist, nicht nur über den hellsten oder dunkelsten Teil.
• Verwenden Sie farbraumbewusste Syntax: linear-gradient(in oklch, #667eea, #764ba2) erzeugt glattere wahrnehmungsbasierte Übergänge als die Standard-sRGB-Interpolation. Unterstützt in Chrome 113+, Safari 16.4+, Firefox 113+.
• Mit DevTools inspizieren: Chrome- und Firefox-DevTools zeigen einen visuellen Verlaufseditor an, wenn Sie über einen Verlaufswert im Stile-Panel fahren. Schnellster Weg, vorhandene Verläufe anzupassen.

Datenschutz

Der CSS-Verlaufsgenerator läuft vollständig in Ihrem Browser. Die Farben, die Sie wählen, die Verlaufskonfigurationen, mit denen Sie experimentieren, und das CSS, das Sie generieren, verlassen Ihr Gerät nie. Es gibt keine Telemetrie, keine Nutzungsverfolgung, kein Hochladen Ihrer Designentscheidungen. Für Tools, die während der Designexploration verwendet werden, ist das wichtig: Die Farben und Muster, die Sie ausprobieren, können bevorstehende Markenrichtungen, unangekündigte Produktthemen oder Kundenarbeit unter NDA preisgeben. Die rein browserbasierte Generierung hält all das auf Ihrem Rechner.