CSS-Verlauf gestalten und Code kopieren
Dieser CSS-Verlauf-Generator erstellt Hintergründe mit <code>linear-gradient()</code>, <code>radial-gradient()</code> und <code>conic-gradient()</code> visuell. Klicken Sie auf die Stoppleiste, um Farben hinzuzufügen, ziehen Sie sie an ihren Platz, legen Sie die Deckkraft jedes Stopps fest und passen Sie dann Winkel, Form oder Mittelpunkt an, während die Vorschau live aktualisiert wird. Kopieren Sie das CSS mit einer festen Ersatzfarbe, kopieren Sie eine fertige Tailwind-Klasse oder exportieren Sie den Verlauf als PNG in beliebiger Größe. Fügen Sie einen Verlauf aus Ihrem Stylesheet ein, um ihn hier zu bearbeiten. Alles läuft lokal in Ihrem Browser.
So erstellen Sie einen CSS-Verlauf
- 1Wählen Sie Linear, Radial oder Konisch, oder beginnen Sie mit einer der Vorlagen.
- 2Klicken Sie an eine beliebige Stelle der Stoppleiste, um einen Farbstopp hinzuzufügen, ziehen Sie Stopps, um sie zu verschieben, und drücken Sie Entf auf einem fokussierten Stopp, um ihn zu entfernen. Pfeiltasten verschieben den fokussierten Stopp um 1 %, Umschalt+Pfeil um 10 %.
- 3Wählen Sie Farbe und Deckkraft jedes Stopps. Jede CSS-Farbe funktioniert: Hex,
rgb(),hsl(),oklch()oder ein Farbname. - 4Stellen Sie den Winkel mit dem Drehregler ein (Umschalt gedrückt halten für 15°-Schritte), oder ziehen Sie bei radialen und konischen Verläufen in der Vorschau, um den Mittelpunkt zu verschieben.
- 5Kopieren Sie das CSS oder die Tailwind-Klasse, oder geben Sie Breite und Höhe ein und laden Sie ein PNG herunter.
Lineare, radiale und konische Verläufe
- linear-gradient()
- Die Farben ändern sich entlang einer geraden Linie in einem Winkel. <code>0deg</code> zeigt nach oben, <code>90deg</code> nach rechts; die Schlüsselwörter <code>to right</code> und <code>to bottom left</code> drücken dasselbe in Worten aus. Die Verlaufslinie ist gerade so lang, dass die Ecken die erste und die letzte Farbe erhalten.
- radial-gradient()
- Die Farben breiten sich von einem Mittelpunkt als Kreis oder Ellipse aus. Das Größen-Schlüsselwort bestimmt, wo 100 % liegt: <code>farthest-corner</code> (Standard) reicht bis zur entferntesten Ecke der Box, <code>closest-side</code> endet am nächstgelegenen Rand.
- conic-gradient()
- Die Farben laufen wie Uhrzeiger um einen Mittelpunkt, beginnend beim <code>from</code>-Winkel. Mit harten Stopps entstehen Tortendiagramme und Farbkreise ganz ohne Bilder.
Farbstopps, harte Kanten und Transparenz
Jeder Farbstopp besteht aus einer Farbe und einer Position. Zwischen zwei Stopps mischt der Browser weich; teilen sich zwei Stopps eine Position, wechselt die Farbe abrupt – so entstehen Streifen, Flaggen und Tortendiagramme. Geben Sie zwei benachbarten Stopps dieselbe Farbe, um sie als festes Band zu halten.
Stopps können teilweise transparent sein. So kann ein Verlauf ein Bild in die Seite überblenden oder den unteren Teil eines Hero-Bilds abdunkeln, damit weißer Text lesbar bleibt. Moderne Browser mischen transparente Stopps in vormultiplizierter Farbe, daher wird ein Übergang zu transparent in der Mitte nicht mehr grau. Der Generator schreibt trotzdem die explizite rgba()-Farbe, damit es eindeutig ist.
Wiederholende Verläufe
repeating-linear-gradient() und die radialen und konischen Gegenstücke wiederholen das Muster zwischen erstem und letztem Stopp über die ganze Box. Aktivieren Sie Wiederholen und setzen Sie den letzten Stopp deutlich vor 100 %, zum Beispiel auf 10 %, um Streifen, Ringe oder Sonnenstrahlen zu erhalten. Liegt der letzte Stopp bei 100 %, sieht ein wiederholender Verlauf genau wie ein normaler aus.
Ersatzfarbe, Tailwind und PNG-Export
Verläufe sind Bilder – ein Browser, der sie nicht zeichnen kann, zeigt hinter Ihrem Text nichts an. Die optionale Ersatzzeile setzt zuerst einen festen background aus dem Durchschnitt Ihrer Stopps, und die Verlaufszeile danach überschreibt ihn überall dort, wo Verläufe funktionieren.
Die Tailwind-Ausgabe ist eine Klasse mit beliebigem Wert wie bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)]. Leerzeichen werden zu Unterstrichen, weil Tailwind-Klassennamen keine Leerzeichen enthalten dürfen; sie funktioniert in Tailwind 3 und 4 ohne Konfiguration.
Der PNG-Export malt denselben Verlauf in der gewählten Größe auf ein Canvas, bis zu 8192 Pixel pro Seite, für Hintergrundbilder, Social-Media-Grafiken oder Designtools, die kein CSS lesen. Wählen Sie mit dem Kontrastprüfer passende Farben für Ihren Text, wandeln Sie sie mit dem Farbkonverter zwischen Notationen um oder schaffen Sie Tiefe mit dem Box-Shadow-Generator.
Einen vorhandenen Verlauf bearbeiten
Fügen Sie einen Verlauf unter Importieren ein: ein bloßes linear-gradient(…), eine ganze background:- oder background-image:-Deklaration, eine Version mit -webkit--Präfix oder eine Tailwind-Klasse bg-[…]. Richtungen wie to top right, Winkel in deg, turn oder rad, Stopps mit zwei Positionen und Stopps ohne Position werden alle erkannt. Pixelpositionen und Farbhinweise lassen sich auf einer Prozentleiste nicht darstellen; sie werden daher angenähert, und der Import weist Sie darauf hin.
Häufige Fragen
- Wie erstelle ich einen Verlaufshintergrund in CSS?
- Setzen Sie background (oder background-image) auf eine Verlaufsfunktion, zum Beispiel background: linear-gradient(90deg, #ff7e5f, #feb47b);. Dieser Generator schreibt diese Zeile für Sie, auf Wunsch mit einer festen Ersatzfarbe davor.
- Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?
- Ein linearer Verlauf ändert die Farbe entlang einer geraden Linie, ein radialer breitet sich von einem Mittelpunkt in Kreisen oder Ellipsen aus, und ein konischer läuft wie ein Uhrzeiger um einen Mittelpunkt.
- Wie erstelle ich eine harte Kante oder Streifen?
- Setzen Sie zwei Stopps mit unterschiedlichen Farben auf dieselbe Position. Für wiederholte Streifen aktivieren Sie Wiederholen und setzen den letzten Stopp auf einen kleinen Wert wie 10 %.
- Kann ein CSS-Verlauf transparent sein?
- Ja. Verringern Sie die Deckkraft eines Stopps, und der Generator schreibt ihn als rgba(). Ein Verlauf von einer Farbe zu transparent ist ein üblicher Weg, ein Bild oder Overlay in die Seite überzublenden.
- Wie verwende ich einen Verlauf in Tailwind CSS?
- Kopieren Sie die Tailwind-Klasse, einen beliebigen Wert wie bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)], und fügen Sie sie Ihrem Element hinzu. Die Tailwind-Utilities from-/via-/to- decken nur einfache lineare Verläufe ab; der beliebige Wert unterstützt jeden Verlauf.
- Funktionieren konische Verläufe in allen Browsern?
- conic-gradient() funktioniert in allen aktuellen Versionen von Chrome, Edge, Firefox und Safari. Fügen Sie die Ersatzfarbe hinzu, wenn Sie noch sehr alte Browser unterstützen.
- Kann ich den Verlauf als Bild herunterladen?
- Ja. Geben Sie Breite und Höhe ein und laden Sie ein PNG herunter. Das Bild wird in Ihrem Browser genau in dieser Größe gezeichnet, bis zu 8192 × 8192 Pixel.
- Wird etwas hochgeladen?
- Nein. Vorschau, CSS und PNG-Export entstehen vollständig in Ihrem Browser.