Ueberblick
Dieses Tool macht aus einer Farbauswahl direkt nutzbare CSS-Verläufe, ohne dass du Werte per Hand ausprobieren musst. Wechsle zwischen linearem und radialem Modus, passe Winkel oder Fokuspunkt an und sieh jede Änderung sofort in der Vorschau. Sinnvoll ist das überall dort, wo der Hintergrund bewusst gestaltet sein soll: in Hero-Bereichen, auf Buttons, Karten, Overlays, Badges und dezenten UI-Akzenten. Das Ergebnis ist sauberer CSS-Code, den du in Stylesheets, Komponenten oder ein Token-Setup übernehmen kannst.
Anwendungsfaelle
- Hero-HintergrundErzeuge einen starken Verlauf für den oberen Seitenbereich, der Überschrift und Marke trägt.
- CTA-ButtonErstelle einen kompakten Zwei-Farben-Verlauf für Call-to-Action-Buttons und interaktive Elemente.
- Karten-GlowLege einen weichen radialen Schein hinter Preis-Karten, Feature-Kacheln oder Produkt-Panels.
- Farbpalette vergleichenTeste mehrere Farbkombinationen, bevor sie ins UI-Set oder Stylesheet übernommen werden.
- Bild-OverlayBaue eine Verlaufsebene, die die Lesbarkeit von Text auf Bannern und Bildern verbessert.
So funktioniert es
- 1
Wähle die Verlauf-Farben.
- 2
Entscheide dich für linear oder radial.
- 3
Stelle Winkel, Position oder Ausdehnung ein.
- 4
Prüfe die Live-Vorschau.
- 5
Kopiere den CSS-Code ins Projekt.
Beispiele
Diagonaler Marken-Hintergrund
Eingabe: #0f172a → #2563eb bei 135°
Ausgabe: background: linear-gradient(135deg, #0f172a, #2563eb);
Ein markanter Verlauf von dunkel zu hell für Hauptsektionen.
Sanfter radialer Schein
Eingabe: #fff7ed → #fdba74 zentriert
Ausgabe: background: radial-gradient(circle at center, #fff7ed 0%, #fdba74 100%);
Ein warmer Glow für Karten und Panels.
Header mit drei Farbstopps
Eingabe: #111827 → #4f46e5 → #c084fc
Ausgabe: background: linear-gradient(120deg, #111827 0%, #4f46e5 52%, #c084fc 100%);
Ein dichterer Farbverlauf für Header und Hero-Flächen.
FAQ
Kann ich den Startpunkt des Verlaufs steuern?
Ja. Beim linearen Verlauf legst du den Winkel fest, beim radialen zusätzlich den Mittelpunkt und die Verteilung der Fläche.
Warum sieht die Vorschau im Projekt anders aus?
Größe des Elements, Hintergrundfarbe darunter und das Rendering des jeweiligen Browsers können das Erscheinungsbild leicht verändern.
Wie viele Farbstopps sind sinnvoll?
Zwei Stopps reichen für einfache Flächen, drei oder mehr für reichere Übergänge. Zu viele Stopps wirken schnell unruhig.
Kann ich den Code direkt in normales CSS und Komponenten-Stile einfügen?
Ja. Die Ausgabe lässt sich in Stylesheets, Inline-Stile oder Komponenten-Definitionen übernehmen.