CSS-Verlauf-Generator
Datenschutz by Design — läuft vollständig in Ihrem Browser
Lineare und radiale CSS-Farbverläufe visuell im Browser erstellen. Toova lässt Sie Farbstopps platzieren, Winkel anpassen, Typen wechseln und fertiges CSS exportieren — alles ohne irgendetwas auf einen Server hochzuladen.
Lineare, radiale und konische Farbverläufe
Lineare Farbverläufe verlaufen entlang einer geraden Achse, die durch einen Winkel oder ein Richtungsschlüsselwort definiert wird. Radiale Farbverläufe expandieren von einem Mittelpunkt. Konische Farbverläufe verlaufen kreisförmig um einen Winkel — ideal für kreisdiagrammartige Hintergründe oder Farbrad-Effekte. Toova bietet alle drei mit visuellen Steuerelementen, damit Sie den gewünschten Farbverlauf erstellen können, ohne jede Variante der CSS-Syntax auswendig zu lernen.
Farbstopps und Easing
Ziehen Sie Farbstopps entlang der Farbverlaufsleiste, um zu steuern, wo jede Farbe beginnt und endet. Fügen Sie so viele Stopps hinzu, wie Sie benötigen — Toova begrenzt sie nicht. Verwenden Sie die Easing-Voreinstellungen, um nichtlineare Interpolation einzuführen, was das trübe graue Mittelfeld vermeidet, das einfache Zweifarbverläufe plagt. Das CSS-Ausgabe verwendet Standardeigenschaften, die von jedem modernen Browser unterstützt werden.
Nur im Browser
Jeder Farbverlauf wird lokal in Ihrem Browser generiert. Die gewählten Farben, die platzierten Stopps, das CSS-Ergebnis — nichts davon verlässt die Seite. Für Farbverläufe ist das übertrieben, aber es macht das Werkzeug schnell und zuverlässig, und die Seite funktioniert nach dem ersten Laden auch offline. Der Netzwerk-Tab bleibt während der Verwendung leer.
Häufig gestellte Fragen
- Wann sollte ich einen konischen Farbverlauf verwenden?
- Konische Farbverläufe sind perfekt für Kreisdiagramm-Effekte, Farbräder und abstrakte rotierende Hintergründe. Sie verlaufen um einen Mittelpunkt, was weder lineare noch radiale Farbverläufe können. Die Browser-Unterstützung ist in modernen Engines jetzt solide.
- Wie vermeide ich den trüben Mittelpunkt bei Zweifarbverläufen?
- Fügen Sie einen Zwischenstopp mit einer wahrnehmungsbalancierten Farbe hinzu, oder wählen Sie Farben mit ähnlicher Helligkeit. Das Mischen komplementärer Farben durch ihren RGB-Mittelpunkt erzeugt Grau — den Mittelpunkt manuell in OKLCH zu wählen vermeidet das.
- Kann ich in andere Formate exportieren?
- Die Ausgabe ist Standard-CSS, das direkt in jedem Web-Kontext funktioniert. Für Design-Werkzeuge kopieren Sie einzelne Farbstopps und replizieren den Farbverlauf in Figma oder Sketch.
- Wird Transparenz unterstützt?
- Ja. Jeder Farbstopp kann einen Alpha-Kanal haben. Nützlich zum Ausblenden von Kanten in den Hintergrund oder zum Überlagern von Farbverläufen mit halbtransparenten Stopps.
- Werden meine Daten irgendwohin gesendet?
- Nein. Die Generierung läuft vollständig in Ihrem Browser.