Überblick CSS-Verlauf
Wahrnehmungsgleicher Verlauf
Verwendung
Erstellen Sie lineare und radiale Verläufe mit mehreren Stopps, passen Sie Winkel und Farbraum an und kopieren Sie das fertige CSS.
CSS-Verlauf
0%
100%
Lineare, radiale und konische Verläufe
Lineare Verläufe mischen Farben entlang einer geraden Linie im gewählten Winkel. Radiale laufen von einem Mittelpunkt nach außen, konische laufen um den Mittelpunkt wie ein Farbkreis.
Bewegen Sie jeden Farbstopp zwischen 0% und 100%, um Anfang und Ende zu steuern, und kopieren Sie das erzeugte CSS.
CSS-Ausgabe und Performance
CSS-Verläufe werden ohne Bildanfragen vom Browser gerendert und bleiben in jeder Auflösung scharf.
Für die meisten Interfaces genügen zwei bis drei Stopps. Viele Stopps kosten wenig Leistung, sind aber schwer zu pflegen.
Häufige Fragen
Wie verwende ich den Verlauf?
Kopieren Sie die background-Deklaration und fügen Sie sie in Ihre CSS-Regel ein. Vorschau und Code aktualisieren sich gemeinsam.
Welchen Winkel sollte ich nutzen?
0deg zeigt nach oben, 90deg nach rechts, 180deg nach unten. Die Vorlagen springen zu gängigen Richtungen.
Kann ein Verlauf transparent sein?
Ja. Nutzen Sie nach dem Kopieren einen transparenten Stopp oder einen rgba-Wert im CSS.
Funktionieren Verläufe in E-Mails?
Viele E-Mail-Clients ignorieren Verläufe. Geben Sie vor der Verlaufsdeklaration eine Volltonfarbe als Fallback an.