CSS-Verlaufsgenerator
Erstelle lineare, radiale und konische CSS-Verläufe mit Live-Vorschau und kopierfertigem Code.
CSS-Verlaufsgenerator wird geladen… Wenn nichts passiert, aktiviere JavaScript.
Ein CSS-Verlauf ist eine Funktion, die einen weichen Übergang zwischen zwei oder mehr Farben erzeugt, vollständig vom Browser ohne jede Bilddatei gerendert. Es gibt drei Typen: `linear-gradient()` lässt Farben entlang einer geraden Achse in beliebigem Winkel übergehen; `radial-gradient()` strahlt von einem Mittelpunkt nach außen als Kreis oder Ellipse; und `conic-gradient()` führt die Farben wie das Zifferblatt einer Uhr um einen Mittelpunkt herum. Alle drei sind auflösungsunabhängig, sie rendern bei jeder Bildschirmdichte gestochen scharf, von Standard-HD-Displays bis zu hochauflösenden Retina-Bildschirmen, und da sie auf der GPU berechnet werden, verursachen sie im Vergleich zu Bildhintergründen praktisch keine Performancekosten.
Häufig gestellte Fragen
Wird etwas an einen Server gesendet, wenn ich einen Verlauf erstelle?
Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?
Funktionieren CSS-Verläufe in allen Browsern?
Wie erzeuge ich einen Verlauf mit einer scharfen Kante statt eines weichen Übergangs?
Kann ich Verläufe als Rahmen oder Textfüllung verwenden?
Was ist ein Farbstopp und wie viele kann ich hinzufügen?
Wie steuere ich den Mittelpunkt zwischen zwei Farbstopps?
Kann ich mehrere Verläufe übereinanderlegen?
Wie hat man vor CSS3 Verläufe erzeugt?
Wie erstelle ich einen Verlauf, der als Lade-Spinner funktioniert?
Über CSS-Verlaufsgenerator
CSS-Verläufe werden im modernen Webdesign überall eingesetzt. Dezente lineare Verläufe verleihen Hero-Bereichen, Button-Zuständen und Kartenhintergründen Tiefe, ohne den Overhead von Bildressourcen. Radiale Verläufe erzeugen Spotlight-Effekte, Vignetten und ein sanftes Leuchten rund um Fokus-Elemente. Konische Verläufe bilden die Grundlage für Kreisdiagramme, Lade-Spinner und Farbräder, die rein in CSS gebaut sind. Über die Ästhetik hinaus werden Verläufe in CSS im Quellcode neben dem Markup versioniert, das sie gestalten, was sie leichter wartbar, aktualisierbar und übergebbar macht als in Designsoftware erzeugte Bilddateien.
Dieses Tool bietet einen visuellen Live-Editor für alle drei Verlaufstypen. Du fügst Farbstopps auf einer interaktiven Spur hinzu, entfernst und verschiebst sie, passt Winkel oder Form an, und die CSS-Ausgabe aktualisiert sich in Echtzeit. Das erzeugte Snippet ist standardkonformes, herstellerpräfixfreies CSS3, das in allen modernen Browsern funktioniert. Es läuft vollständig clientseitig, ohne Uploads, ohne Konten, ohne Tracking. Änderungen existieren nur in deiner Browsersitzung und im finalen CSS, das du in die Zwischenablage kopierst.
Ein wichtiger Aspekt ist die Barrierefreiheit: Verläufe sind dekorative Hintergründe und tragen keine Textalternativen, aber sie beeinflussen das Kontrastverhältnis jeglichen Textes, der darüber gerendert wird. Ein Verlauf, der hell beginnt und dunkel endet, kann Text auf der einen Seite des Elements lesbar und auf der anderen unlesbar machen. Prüfe deine Verlaufshintergründe immer gegen deinen Vordergrundtext mit einem Kontrastprüfer. Eine praktische Technik besteht darin, über eine zusätzliche CSS-Ebene eine halbtransparente dunkle Überlagerung hinzuzufügen, `linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4))`, um über die gesamte Verlaufsfläche einen konstanten Mindestkontrast zu gewährleisten.
Von grellen Regenbogenbalken der 1990er zu GPU-beschleunigtem CSS: die Zeitleiste des Web-Verlaufs
Webdesigner erhielten Verläufe erstmals Ende der 1990er-Jahre durch GIF- und PNG-Bildausschnitte, eine ein Pixel breite Bildkachel, die horizontal gestreckt wurde, oder einen Bildhintergrund über die volle Breite. Die Technik war so verbreitet, dass sie eine ganze Ästhetik prägte: Die Navigationsleiste mit Verlauf von Dunkelblau zu Schwarz wurde zum Sinnbild des Unternehmens-Webdesigns der frühen 2000er. Diese Verläufe zu erstellen oder anzupassen erforderte Photoshop, einen neuen Export und ein Server-Deployment, ein Arbeitsablauf, der für eine Farbänderung, die im Review möglicherweise abgelehnt wurde, Stunden dauern konnte.
CSS-Verlaufssyntax mit Herstellerpräfixen tauchte um 2008 auf: `-webkit-gradient()` in Safari, mit seiner eigenen eigenwilligen Syntax, die kaum dem ähnelte, was zum Standard werden sollte. Firefox führte `-moz-linear-gradient()` mit einer anderen Syntax ein. Internet Explorer bot bis IE10 keine Verlaufsunterstützung, was Entwickler dazu trieb, stattdessen die proprietäre Syntax `filter: progid:DXImageTransform.Microsoft.gradient()` zu verwenden. Mehrere Jahre lang erforderte das Erreichen konsistenter browserübergreifender Verläufe, vier separate Deklarationen für denselben Effekt zu schreiben, ein Wartungsalbtraum, der CSS-Präprozessoren und Verlaufsgenerator-Tools enorm populär machte.
Das W3C standardisierte CSS-Verläufe in der Spezifikation CSS Images Level 3, wobei lineare und radiale Verläufe um 2013 universelle präfixfreie Unterstützung erhielten. Konische Verläufe, von Lea Verou 2015 in einem Blogbeitrag vorgeschlagen, wurden zwischen 2018 und 2020 in den Browsern implementiert, nachdem sie ein Polyfill veröffentlicht hatte, das die Anwendungsfälle demonstrierte. Der Weg von improvisierten Bildkacheln zu nativen, GPU-gerenderten CSS-Primitiven spiegelt die breitere Geschichte wider, wie die Webplattform von einem Dokumentensystem zu einer vollwertigen Anwendungslaufzeit heranreifte.