CSS-Farbverlauf-Generator
Erstellen Sie einen Farbverlauf visuell und kopieren Sie das CSS.
- Läuft in Ihrem Browser — Ihr Text wird nirgendwohin gesendet
- Ohne Anmeldung, ohne Kontingent, so oft nutzbar, wie Sie möchten
So funktioniert es
Farbverläufe werden in CSS als einzelne Deklaration geschrieben, deren Syntax man leicht falsch in Erinnerung hat, besonders die Winkelkonvention und die Position der Farbstopps. Das Ergebnis beim Anpassen zu sehen ist schneller, als eine Seite neu zu laden, um es zu prüfen.
Die Winkelkonvention überrascht viele
In CSS zeigt 0 Grad nach oben und der Winkel nimmt im Uhrzeigersinn zu, sodass 90 Grad von links nach rechts und 180 Grad von oben nach unten verläuft. Das unterscheidet sich von der mathematischen Konvention und von mehreren Design-Tools, weshalb ein anderswo kopierter Farbverlauf oft gedreht herauskommt.
Die drei Typen
Linear verläuft entlang einer Geraden und deckt fast jeden praktischen Einsatz ab. Radial breitet sich von einem Punkt nach außen aus, was zu Leuchteffekten und Scheinwerferlicht passt. Konisch überstreicht einen Mittelpunkt und ist die Grundlage von Tortendiagrammen und Farbkreisen.
Ein Farbverlauf ist ein Bild, keine Farbe
Das ist die andere Sache, über die man stolpert. CSS behandelt einen Farbverlauf als Hintergrundbild, deshalb funktioniert er bei background und background-image, aber nicht bei color, border-color oder allem anderen, das eine einfache Farbe erwartet. Textverläufe brauchen background-clip, eine eigene Technik.
Eine mittlere Farbe hinzufügen
Zwei Stopps ergeben einen sauberen Übergang. Ein dritter lässt Sie den Übergang über einen anderen Farbton führen, was das trübe Grau vermeidet, das entsteht, wenn zwei gegensätzliche Farben direkt ineinander übergehen.
CSS-Farbverlauf-Generator – Fragen
In welche Richtung geht der Winkel?
0 Grad zeigt nach oben und Winkel nehmen im Uhrzeigersinn zu, sodass 90 Grad von links nach rechts verläuft.
Warum funktioniert mein Farbverlauf nicht bei Text?
Ein Farbverlauf ist ein Hintergrundbild, keine Farbe. Textverläufe brauchen background-clip als gesonderten Schritt.
Wann sollte ich radial oder konisch verwenden?
Radial für Leuchteffekte und Scheinwerferlicht, konisch für Tortendiagramm- und Farbkreis-Effekte. Linear deckt die meisten anderen Fälle ab.