TanodTools
DE

CSS-Farbverlauf-Generator

Gestalten Sie einen linearen, radialen oder konischen Farbverlauf, sehen Sie jede Änderung sofort und kopieren Sie die CSS-background-Regel.

Läuft vollständig in Ihrem Browser

Typ
Optionen

Farbstopps

    Vorlagen

    Farbstopps können jede Farbe sein, die Ihr Browser versteht (HEX, Namen, rgb(), hsl(), oklch()). Bis zu 10 Farbstopps. Positionen sind Prozentwerte; die Ausgabe ist reines CSS ohne Herstellerpräfixe.

    So erstellen Sie einen CSS-Farbverlauf

    1. Wählen Sie Linear, Radial oder Konisch, oder beginnen Sie mit einer Vorlage.
    2. Stellen Sie Winkel oder Position ein und bearbeiten Sie dann die Farbstopps: Ändern Sie Farbe und Position, fügen Sie Farbstopps hinzu und verschieben Sie sie nach oben oder unten.
    3. Klicken Sie auf CSS kopieren und fügen Sie die Regel in Ihr Stylesheet ein. Aktivieren Sie die Fallback-Option, wenn davor eine Zeile mit einer Volltonfarbe stehen soll.

    Einen CSS-Farbverlauf verstehen

    Ein CSS-Farbverlauf (Gradient) ist ein Bild, das der Browser selbst zeichnet; er skaliert daher auf jede Größe und kostet keinen Download. Ein linearer Verlauf mischt Farben entlang einer Linie, die durch einen Winkel festgelegt ist. Ein radialer Verlauf mischt von einem Mittelpunkt aus nach außen, als Kreis oder Ellipse. Ein konischer Verlauf lässt die Farben wie einen Uhrzeiger um einen Mittelpunkt kreisen und ist damit die naheliegende Wahl für Tortendiagramme und Farbkreise.

    Jeder Farbstopp ist eine Farbe plus eine Position auf der Verlaufslinie, angegeben in Prozent. Zwischen zwei Farbstopps mischt der Browser weich. Teilen sich zwei Farbstopps eine Position, hat der Übergang keine Breite, und es entsteht eine scharfe Kante. Liegt ein Farbstopp vor dem vorherigen, behandeln Browser ihn so, als läge er an der Position des vorherigen; deshalb können Sie die Farbstopps in diesem Tool umordnen und sortieren.

    Die Regel wird als background: geschrieben und funktioniert daher bei jedem Element. Verläufe werden auf den Hintergrund gezeichnet; Text darauf braucht also dieselbe Sorgfalt beim Kontrast wie Text auf einer Volltonfarbe: Prüfen Sie den hellsten und den dunkelsten Teil des Verlaufs getrennt.

    Tipps

    Häufige Fragen

    Was bedeutet der Winkel bei einem linearen Verlauf?

    0deg zeigt nach oben, der Verlauf läuft also vom unteren Rand nach oben. 90deg läuft von links nach rechts, 180deg von oben nach unten und 270deg von rechts nach links. 360deg ist dieselbe Richtung wie 0deg. Das Tool schreibt die eingegebene Zahl mit der Einheit deg.

    Wie bekomme ich eine harte Kante statt eines weichen Übergangs?

    Geben Sie zwei benachbarten Farbstopps dieselbe Position. Zum Beispiel wechselt Rot bei 50 % gefolgt von Blau bei 50 % die Farbe genau in der Mitte, ohne Übergang. Die Vorlage Harte Streifen zeigt das.

    Was bewirkt die Option Wiederholen?

    Sie schreibt repeating-linear-gradient, repeating-radial-gradient oder repeating-conic-gradient. Das Muster zwischen erstem und letztem Farbstopp wird gekachelt; das ist nur sichtbar, wenn der letzte Farbstopp vor 100 % liegt. Probieren Sie Farbstopps bei 0 %, 10 % und 20 %, um Streifen zu erhalten.

    Wofür ist die Fallback-Zeile mit Volltonfarbe?

    Ein Browser, der den Verlauf nicht lesen kann, ignoriert diese Zeile und behält die vorherige. Browser, die Verläufe unterstützen, und das sind fast alle im Einsatz, überschreiben sie. Die Fallback-Farbe ist die Farbe Ihres ersten Farbstopps.

    Welche Farbformate werden akzeptiert?

    Alles, was die CSS-Eigenschaft color in Ihrem Browser akzeptiert: #1636a3, tomato, rgb(22 54 163), hsl(226 76% 36%) oder oklch(0.5 0.2 260). Bei anderen Eingaben erscheint eine Meldung, und der letzte gültige Verlauf bleibt sichtbar.

    Braucht ein konischer Verlauf eine Position?

    Er hat immer einen Mittelpunkt, und dieses Tool schreibt ihn als Prozentwerte, 50% 50% ist also die Mitte des Elements. Der Startwinkel dreht den Beginn des Farbumlaufs, gemessen im Uhrzeigersinn von oben.