CSS-Verlaufsgenerator

Die Eigenschaft background (oder background-image) auf eine Verlaufsfunktion setzen. Am einfachsten ist ein Zweifarbverlauf: background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); — das erzeugt einen Links-nach-rechts-Übergang von Indigo nach Pink. Farben und Winkel oben auswählen und die fertige background-Zeile direkt ins Stylesheet kopieren. Die Syntax muss nicht von Hand geschrieben werden — der Generator erstellt sie, während die Stopps verschoben werden.

Ein linear-gradient blendet Farben entlang einer geraden Linie in einem wählbaren Winkel über (z. B. 90deg = links nach rechts). Ein radial-gradient blendet von einem Mittelpunkt nach außen in Kreisen oder Ellipsen, wie ein Scheinwerfer. Ein conic-gradient dreht die Farben um einen Mittelpunkt wie Zeiger einer Uhr, was ihn ideal für Farbräder und Tortendiagramme macht. Dieses Tool erstellt alle drei; mit den Schaltflächen Linear / Radial / Konisch wechseln. Die meisten kostenlosen Farbverlauf-Tools wie Canvas Hintergrundgenerator bieten nur lineare Verläufe an, und cssgradient.io unterstützt konische Verläufe überhaupt nicht.

Einen Farbverlauf auf den Hintergrund eines beliebigen Elements anwenden. Für einen ganzseitigen Hintergrund eignet sich: body { background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); min-height: 100vh; }. Da ein Farbverlauf als Bild zählt, kann auch background-attachment: fixed; hinzugefügt werden, damit er beim Scrollen fixiert bleibt. Oben visuell erstellen und das CSS kopieren. Kein Figma, Canva oder anderes Design-Tool nötig. Funktioniert in allen modernen Browsern ohne Präfixe.

Zusätzliche Farbstopps mit eigener Position hinzufügen. Irgendwo auf die Verlaufsleiste (oder die Schaltfläche + Stopp hinzufügen) klicken, um einen neuen Stopp einzufügen, und ihn dann an die gewünschte Stelle ziehen. Drei Farben sehen so aus: linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #00ff00 100%). Es gibt keine echte Grenze — so viele Stopps hinzufügen, wie das Design erfordert. Im Gegensatz zu coolors.co, das nur Farbpaletten ohne das eigentliche CSS zeigt, oder Canva, das die Verlaufsbearbeitung hinter einem Konto sperrt, wird hier sofort unbegrenzte Produktions-CSS generiert.

Beim linearen Farbverlauf ist der erste Wert der Winkel: 0deg zeigt nach oben, 90deg nach rechts, 180deg nach unten, 270deg nach links. Schlüsselwörter wie 'to right' oder 'to bottom right' können ebenfalls verwendet werden, sodass linear-gradient(to right, ...) identisch mit linear-gradient(90deg, ...) ist. Den Winkel-Slider ziehen oder einen Richtungspfeil anklicken — der Wert aktualisiert sich live. Die ausgegebene CSS wird in Echtzeit aktualisiert, sodass sie direkt in ein Stylesheet oder Framework kopiert werden kann.

Nein. linear-gradient, radial-gradient und conic-gradient werden in jedem aktuellen Browser ohne Präfix unterstützt, ein einfaches background: linear-gradient(...) reicht aus. -webkit- würde nur für sehr altes Safari/iOS (vor 2017) oder ältere Android-WebView benötigt. Mit 'Add -webkit- prefix' in der CSS-Ausgabe gibt das Tool eine korrekt konvertierte Fallback-Zeile über der Standardzeile aus. Die Winkelkonvertierung (90deg wird zu 270deg in der webkit-Version) erfolgt automatisch.

Die Gradient-Hilfsprogramme verwenden: eine Richtungsklasse plus from-, via- und to-Farben, z. B. bg-gradient-to-r from-indigo-500 to-pink-500. Für genaue Farben Arbitrary Values nutzen: bg-gradient-to-r from-[#6366f1] to-[#ec4899]. Die Ausgabe auf den Tailwind-Tab umschalten, um die Klassen für den aktuellen Farbverlauf zu kopieren, einschließlich eines bg-[linear-gradient(...)] Arbitrary Value für radiale und konische Verläufe, für die Tailwind keine benannten Kürzel hat. Die meisten Tailwind-Farbverlauf-Ressourcen behandeln diesen Sonderfall nicht.

PNG herunterladen anklicken. Das Tool malt den exakten Farbverlauf auf einem HTML-Canvas bei 1600x900 und speichert ihn als .png — ideal als Folienhintergrund, Social-Media-Banner oder Design-Mockup. Es wird vollständig im Browser gerendert, sodass nichts hochgeladen wird. Im Gegensatz zu TinyWow, das einen Datei-Upload auf einen Server erfordert, oder Adobe Express, das den PNG-Export hinter einem kostenpflichtigen Abo verbirgt, gibt es hier weder Datenschutzrisiken noch Kosten. Andere Größen benötigt? Das PNG anschließend in einem beliebigen Bildeditor skalieren oder zuschneiden.

'Aus Bild' anklicken und ein Foto auswählen. Das Tool liest die Pixel lokal, findet die häufigsten Farben und erstellt daraus einen Farbverlauf — eine schnelle Methode, ein Markenfoto oder Produktbild aufzugreifen. Das Bild verlässt das Gerät nie; es wird im Browser analysiert und sofort verworfen. Im Gegensatz zu Adobe Color oder Coolors, die einen Upload oder ein Konto zum Extrahieren von Paletten erfordern, bleibt alles privat auf dem eigenen Gerät. Die extrahierten Stopps können anschließend angepasst, der Winkel geändert oder zu radialem oder konischem Verlauf gewechselt werden.

Ein konischer Farbverlauf dreht seine Farben um einen Mittelpunkt statt entlang einer Linie, sodass der Übergang wie ein Uhrzeiger schwenkt. conic-gradient(from 0deg, red, yellow, green, blue, red) ergibt ein vollständiges Farbrad. Sie eignen sich ideal für Tortendiagramme, Donut-Charts, Fortschrittsringe, Farbwähler und eckige Glüheffekte. Die Browser-Unterstützung ist seit 2021 in Chrome, Firefox, Safari und Edge ohne Präfix stabil. Oben Konisch auswählen, Startwinkel und Mittelpunktposition festlegen und experimentieren. Die meisten Farbverlauf-Generator-Tools unterstützen konische Verläufe überhaupt nicht.

Einem Stopp einen Alpha-Wert geben. Den Deckkraft-Slider eines Stopps verringern und die CSS wechselt zu rgba(). Beispiel: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%) blendet von transparent zu 60 % Schwarz, der klassische Scrim hinter Text auf einem Foto. Tipp: Zwischen derselben Farbe überblenden (transparent zu solid einer Farbe), um einen schmutzigen grauen Mittelpunkt zu vermeiden, den Browser erzeugen, wenn zwischen zwei verschiedenen vollständig transparenten Farben geblendet wird. Das Tool verarbeitet die rgba-Ausgabe automatisch, wenn die Stopp-Deckkraft angepasst wird.

UtiloKits Farbverlauf-Generator deckt alles ab, was diese Tools bieten — lineare, radiale und konische Verlaufstypen, Mehrstopp-Editoren, Code-Kopie — plus Tailwind-CSS-Ausgabe, PNG-Download, Farbverlauf-aus-Bild-Extraktion, teilbare Links und Unterstützung für animierte Verläufe. cssgradient.io fehlt die Unterstützung für konische Verläufe und hat keine Tailwind-Ausgabe. Colorzillas Verlauf-Editor ist eine Browsererweiterung und exportiert weder PNG noch Tailwind. Alles hier läuft im Browser ohne Upload, ohne Anmeldung und ohne Werbung, die Funktionen einschränkt.

Ja. Das Tool ist vollständig responsiv und funktioniert in jedem modernen mobilen Browser. In Safari auf dem iPhone oder Chrome auf Android öffnen, den Farbverlauf erstellen und das CSS direkt in die Zwischenablage kopieren. Da alles clientseitig läuft, ist kein Download erforderlich, und es funktioniert auch bei langsamen mobilen Verbindungen, sobald die Seite geladen ist. Der Drag-basierte Stopp-Editor passt sich der Touch-Eingabe an, sodass die Erstellung mehrstoppiger Farbverläufe auf dem Smartphone unkompliziert ist.