🌅CSS-Gradienten-Generator

Unterschiede zwischen linear, radial und conic

CSS-Gradienten haben drei Funktionen mit unterschiedlichen Farbverlaufsmustern. Sie werden alle in die background-Eigenschaft geschrieben.

• linear-gradient：linear-gradient erstellt einen linearen Farbverlauf entlang einer geraden Linie in einem bestimmten Winkel.
• radial-gradient：radial-gradient erstellt einen radialen Farbverlauf, der sich von der Mittelpunktposition nach außen in einem Kreis oder einer Ellipse ausbreitet.
• conic-gradient：conic-gradient erstellt einen konischen Farbverlauf, der sich um die Mittelpunktposition im Uhrzeigersinn dreht.

Entsprechung zwischen Winkel und Richtungsschlüsselwort

Der Winkel von linear-gradient ist bei 0deg von unten nach oben gerichtet. Mit zunehmenden Werten dreht er sich im Uhrzeigersinn. Der Winkel kann auch mit Richtungsschlüsselwörtern wie „to right" angegeben werden. 90deg entspricht „to right" und 180deg entspricht „to bottom".

Wie man Farbstoppstellen und Transparenz schreibt

Eine Farbstoppstelle (Color Stop) ist die Position, an der eine Farbe im Farbverlauf auftritt. 0% ist der Anfang und 100% ist das Ende. Zum Beispiel bedeutet „#3B82F6 0%, #8B5CF6 100%", dass die Farbe von Blau am Anfang zu Lila am Ende verläuft.

• #RRGGBB-Format：Das #RRGGBB-Format ist eine Schreibweise für Farben, bei der die Intensität von Rot, Grün und Blau durch zweistellige Hexadezimalzahlen ausgedrückt wird. #FF0000 bedeutet ein undurchsichtiges Rot.
• rgba-Format：Das rgba-Format ist eine Schreibweise für Farben mit Rot-, Grün- und Blauwert (0–255) und zusätzlicher Transparenz (0–1). Eine Transparenz von 0,5 bedeutet eine zu 50% durchsichtige Farbe.