CSS-Farbverlauf-Generator
Erstellen Sie lineare oder radiale CSS-Verläufe mit 2–10 Farbstopps, Winkelsteuerung, Transparenz und Vorgaben. Sehen Sie sich das Ergebnis in der Vorschau an und kopieren Sie das CSS oder laden Sie es herunter.
Auch bekannt alsCSS Gradient Generator · Farbverlauf-Generator · CSS-Farbverlauf erstellen · CSS-Verlauf-Generator · linear-gradient Generator · Farbverlauf CSS Generator
2–10 Stopps, in der Ausgabe nach Prozentwert sortiert. Gleiche Positionen erzeugen eine harte Kante und behalten ihre aufgeführte Reihenfolge. Transparenz wird über einem Schachbrettmuster angezeigt. Farbkanäle verwenden 8-Bit-sRGB; dezimales Alpha bleibt in der RGBA-Ausgabe erhalten.
Drei kleine Schritte.
- Wählen Sie linear oder radial und beginnen Sie mit einer Vorgabe oder eigenen Farben.
- Bearbeiten Sie Farben und Prozentwerte der Stopps, fügen Sie Stopps hinzu, entfernen Sie sie oder kehren Sie sie um.
- Prüfen Sie die Vorschau und kopieren Sie dann den CSS-Hintergrund oder laden Sie ein Stylesheet herunter.
Ein paar Dinge, die Sie wissen sollten.
Unterstützt Standard-CSS-Farbnamen, numerische HEX/RGB/HSL-Farben und Stopp-Positionen von 0 bis 100 %. Stopps werden nach Position sortiert; gleiche Positionen behalten ihre Listenreihenfolge und können harte Kanten erzeugen. Radiale Verläufe verwenden einen Kreis in der Mitte. Die Farbinterpolation der Browser und die Ausgabedisplays können abweichen; dies ist kein Workflow für Druckfarben.
So funktioniert Ihr Datenschutz →Etwas mehr Klarheit.
Kann ein Verlauf in Transparenz auslaufen?
Ja. Verwenden Sie eine Alphakomponente wie #294C3900 oder rgba(41,76,57,0). Das Schachbrettmuster der Vorschau zeigt transparente Bereiche.
Was bewirkt das Umkehren?
Es kehrt die Liste der Stopps um und setzt jede Position auf 100 minus ihren ursprünglichen Prozentwert. Dadurch kehrt sich auch die Farbreihenfolge an harten Kanten um.
Ähnliche Suchanfragencss farbverlauf generator · css farbverlauf erstellen · css gradient generator with opacity