Zwei Farben, vier Richtungen, fertiger Code
Der Verlaufs-Generator zeigt eine Vorschau des Verlaufs zwischen zwei beliebigen Farben und schreibt das CSS für dich. Wähle diagonal, horizontal, vertikal oder radial und kopiere die linear-gradient- oder radial-gradient-Deklaration oder die passenden Tailwind-Utility-Klassen. Deine beiden Farben stehen in der URL, ein Verlauf lässt sich also per Link teilen, und ein Set vordefinierter Paare aus Material-Design-Farben ist nur einen Klick entfernt.
So funktioniert es
- Lege die Farben Von und Bis mit den Farbwählern oder per Hex-Code fest.
- Wähle unter der Vorschau eine Richtung: diagonal (135°), horizontal, vertikal oder radial.
- Kopiere das CSS oder die Tailwind-Klassen mit den Kopier-Buttons.
- Klicke auf Teilen, um einen Link zu kopieren, oder öffne die eigene Seite des Verlaufs für Farbdetails zu beiden Stopps.
CSS- vs. Tailwind-Ausgabe
Der CSS-Tab liefert eine einfache background: linear-gradient(135deg, #A, #B);-Deklaration, die in jedem modernen Browser ohne Präfixe funktioniert. Der Tailwind-Tab liefert die entsprechenden bg-gradient-to-r from-[#A] to-[#B]-Utilities mit Arbitrary Values, die Farben müssen also nicht in deiner Tailwind-Config existieren. Mit Tailwind v4 heißt die Richtungs-Utility bg-linear-to-r; die from-/to-Klassen bleiben gleich.
Beispiele
- Hero-Hintergrund: ein dunkles Indigo zu einem etwas helleren Indigo, diagonal, hält weißen Text lesbar und gibt Tiefe.
- Button-Hover: ein horizontaler Verlauf zwischen zwei Abstufungen deiner Primärfarbe wirkt lebendiger als ein flacher Farbwechsel.
- Avatar-Platzhalter: ein radialer Verlauf von einer Markenfarbe zu ihrer dunkleren Abstufung wirkt mit Initialen darüber bewusst gestaltet.
Tipps
- Verläufe zwischen zwei Abstufungen desselben Farbtons sehen fast immer gut aus. Nimm beide aus einer Familie der Material-Palette.
- Gegensätzliche Farbtöne können in der Mitte ein schmutziges Grau erzeugen; verschiebe dann einen Stopp in Richtung eines benachbarten Farbtons.
- Prüfe Text auf Verläufen am hellsten Punkt mit dem Kontrast-Checker, nicht am Durchschnitt.
- Hole die beiden Farben mit dem Bild-Farbextraktor aus einem Foto, damit der Verlauf zu deiner Bildwelt passt.