CSS-Verlaufsgenerator

So erstellst du einen CSS-Verlauf

1. Wähle einen Typ: linear verläuft gerade im eingestellten Winkel, radial breitet sich kreisförmig von der Mitte aus, und konisch dreht sich ab dem eingestellten Winkel um die Mitte.
2. Ändere jede Farbe und zieh ihren Regler, um ihre Position von 0 % bis 100 % festzulegen. Farbe hinzufügen setzt eine neue in die größte Lücke, bis zu sechs; ✕ entfernt eine.
3. Oder tippe auf eine Vorlage, um damit zu beginnen. Die Vorschau ändert sich sofort; CSS kopieren kopiert die Zeilen für dein Stylesheet.

Häufige Fragen

Warum gibt es zwei background-Zeilen?

Die erste ist eine einfache Farbe für den seltenen Browser, der keine Verläufe zeichnen kann; die zweite überschreibt sie überall sonst.

Was bedeutet der Winkel?

Bei einem linearen Verlauf läuft 0deg von unten nach oben, 90deg von links nach rechts und 180deg von oben nach unten. Bei einem konischen ist es die Stelle, an der die erste Farbe beginnt, im Uhrzeigersinn ab oben.

Kann ich den Verlauf für Text oder einen Rahmen nutzen?

Ja. Für Text setz ihn als Hintergrund und ergänze background-clip: text und color: transparent. Für einen Rahmen nutze ihn in border-image mit border-image-slice: 1.