CSS-Farbverlauf-Generator
Erstelle einen CSS-Farbverlauf mit bis zu vier Farbstopps, linear, radial oder konisch, und kopiere den Code als CSS oder als Tailwind-v4-Klassen.
So erstellst du einen CSS-Farbverlauf
- Wähle mit den Typ-Buttons Linear, Radial oder Konisch.
- Klicke auf einen Farbstopp, um seine Farbe zu ändern. Mit Stopp hinzufügen und Stopp entfernen arbeitest du mit zwei bis vier Stopps.
- Stelle bei einem linearen Verlauf die Drehung von 0 bis 315 Grad in 45-Grad-Schritten ein. Klicke auf Zufällig für eine neue Idee.
- Schalte den Export zwischen CSS und Tailwind v4 um und klicke dann auf den Kopieren-Button, um den Code mitzunehmen.
Das kannst du damit machen
Drei Verlaufstypen
Lineare Verläufe entlang eines Winkels, radiale Verläufe von einem Mittelpunkt aus und konische Verläufe, die um einen Punkt herumlaufen.
In OKLCH interpoliertes CSS
Das CSS enthält eine sRGB-Version, die jeder Browser versteht, gefolgt vom selben Verlauf in OKLCH interpoliert. So bleibt die Mitte in Browsern, die das unterstützen, genauso kräftig wie die Enden.
Export für Tailwind v4
Kopiere den Verlauf als Tailwind-v4-Utility-Klassen statt als CSS.
Live-Vorschau
Die Vorschau aktualisiert sich, während du Farben, Winkel und Typ änderst.
Aus der Bibliothek starten
Öffne jeden Verlauf aus der Verlaufsbibliothek im Generator, mit bereits geladenen Stopps und Winkel.
Häufige Fragen
Wie erstelle ich einen CSS-Farbverlauf?
Wähle einen Typ, lege zwei bis vier Farben fest und bei einem linearen Verlauf einen Winkel. Der Generator schreibt die background-Deklaration, und du kopierst sie in dein Stylesheet.
Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?
Ein linearer Verlauf mischt die Farben entlang einer geraden Linie in einem Winkel. Ein radialer Verlauf breitet sich von einem Mittelpunkt nach außen aus. Ein konischer Verlauf führt die Farben um einen Mittelpunkt herum, wie bei einem Farbkreis oder einem Tortendiagramm.
Warum sieht mein Verlauf in der Mitte grau oder matschig aus?
Wenn zwei gesättigte Farben in sRGB gemischt werden, kann der Übergang durch eine stumpfere Mitte laufen. Die Interpolation in OKLCH, die das CSS dieses Generators für Browser mit entsprechender Unterstützung enthält, hält die Mitte meist kräftiger.
Kann ich diese Verläufe in Tailwind CSS verwenden?
Ja. Stell den Export auf Tailwind v4 um und kopiere die Klassen.
Wie viele Farbstopps kann ich hinzufügen?
Zwei bis vier. Für eine längere Reihe einzelner Farben nutze den Verlaufspaletten-Generator.