CSS-Farbverlauf-Generator – linear, radial, konisch
Legen Sie Farbstopps und Winkel fest – der CSS-Code für den Verlauf ist sofort kopierbereit.
Ihre Texte und Dateien bleiben in Ihrem Browser – nichts wird an einen Server gesendet.
Klicken Sie auf eine freie Stelle der Leiste, um einen Stopp hinzuzufügen, oder ziehen Sie einen Griff, um ihn zu verschieben.
Die Zeile background-color ist eine Durchschnittsfarbe für Umgebungen, die keine Verläufe darstellen können.
So funktioniert’s
- Wählen Sie eine Art – linear, radial oder konisch – und legen Sie Winkel oder Mittelpunkt fest.
- Fügen Sie Stopps per Klick auf die Leiste oder mit „Stopp hinzufügen“ hinzu. Ziehen Sie einen Griff oder geben Sie einen Prozentwert ein, um einen Stopp zu verschieben.
- Legen Sie die Farbe jedes Stopps mit dem Farbfeld fest oder tippen Sie einen Code wie #rrggbbaa ein, um Transparenz einzubeziehen.
- Kopieren Sie den CSS-Code und fügen Sie ihn in Ihr Stylesheet ein. Mit „Zufällig“ entdecken Sie neue Kombinationen.
Häufige Fragen
Was ist der Unterschied zwischen linear, radial und konisch?
Linear mischt die Farben entlang einer geraden Linie, radial breitet sie von einem Mittelpunkt nach außen aus, und konisch lässt sie im Uhrzeigersinn um den Mittelpunkt laufen. Konische Verläufe eignen sich gut für Tortendiagramme und Farbkreise.
In welche Richtung zeigt 0deg?
Bei linear-gradient verläuft 0deg von unten nach oben und 90deg von links nach rechts. Ein konischer Verlauf beginnt bei 0deg, also auf 12 Uhr.
Funktionieren Farbverläufe in älteren Browsern?
Lineare und radiale Verläufe funktionieren in praktisch allen Browsern, konische in Browsern ab etwa 2020. Wo kein Verlauf dargestellt werden kann, erscheint stattdessen die background-color als Ersatz.
Ähnliche Tools
Alle Tools
Einheitenrechner
- Einheiten-Umrechner
- Temperatur-Umrechner
- Gewichts-Umrechner
- Flächen-Umrechner
- Längenrechner
- Winkel-Umrechner
- Kalorien-Umrechner
- Datenmengen-Umrechner
- Trockenmaß-Umrechner
- Ladungs-Umrechner
- Energie-Umrechner
- Durchfluss-Umrechner
- Kraft-Umrechner
- Spritverbrauch-Umrechner
- Lichtstärke-Umrechner
- Durchflutungs-Umrechner
- Leistungs-Umrechner
- Druck-Umrechner
- Strahlendosis-Umrechner
- Geschwindigkeits-Umrechner
- Zeiteinheiten-Umrechner
- Volumen-Umrechner