Über dieses Tool
Erstellen Sie mit einem visuellen Editor wunderschöne lineare und radiale CSS-Verläufe. Wählen Sie Farben aus, passen Sie Stopps an, ändern Sie Richtung oder Winkel und sehen Sie sich die Aktualisierung der Live-Vorschau in Echtzeit an. Kopieren Sie den generierten CSS-Code – einschließlich der Herstellerpräfixe für ältere Browser – und fügen Sie ihn direkt in Ihr Stylesheet ein.
Häufig gestellte Fragen
- Funktionieren CSS-Verläufe in allen Browsern?
- Moderne CSS-Verläufe (linearer Verlauf, radialer Verlauf) werden in allen aktuellen Browsern unterstützt, einschließlich Chrome, Firefox, Safari und Edge. Das Tool kann optional -webkit- Präfixe für ältere Browserversionen generieren.
- Kann ich mehrfarbige Farbverläufe erstellen?
- Ja. Fügen Sie so viele Farbstopps hinzu, wie Sie benötigen. Sie können auch die Position jedes Stopps anpassen, um zu steuern, wo die Farben verschmelzen. Dies ermöglicht komplexe Regenbogen-, Sonnenuntergangs- oder benutzerdefinierte Markenverläufe.
- Was ist der Unterschied zwischen linearen und radialen Farbverläufen?
- Lineare Farbverläufe überführen die Farben entlang einer geraden Linie (von oben nach unten, von links nach rechts, diagonal oder in einem beliebigen Winkel). Radiale Farbverläufe überführen Farben von einem Mittelpunkt nach außen in eine kreisförmige oder elliptische Form.
- Kann ich den Farbverlauf als Hintergrund für Text verwenden?
- Ja. Verwenden Sie „background-clip: text“ mit „-webkit-text-fill-color: transparent“, um den Farbverlauf auf den Text anzuwenden. Das generierte CSS stellt die Verlaufsdefinition bereit – kombinieren Sie es mit diesen Eigenschaften für Verlaufstext.