Verlauf #9C27B0 zu #00BCD4
Ein weicher Verlauf von #9C27B0 zu #00BCD4. Kopiere den CSS-Code unten, um diesen Verlauf in deinen Projekten zu verwenden.
Farbstopps
Farbe Start
#9C27B0
rgb(156, 39, 176)
hsl(291, 64%, 42%)
Farbe Ende
#00BCD4
rgb(0, 188, 212)
hsl(187, 100%, 42%)
CSS-Verlaufscode
Linear (135deg)
background: linear-gradient(135deg, #9C27B0, #00BCD4);
Horizontal
background: linear-gradient(to right, #9C27B0, #00BCD4);
Radial
background: radial-gradient(circle, #9C27B0, #00BCD4);
Tailwind-CSS-Klassen
Tailwind
bg-gradient-to-r from-[#9C27B0] to-[#00BCD4]
Richtungsvarianten
Horizontal
Vertikal
Diagonal
Ecke
Häufige Fragen
Wie erstelle ich einen Verlauf von #9C27B0 zu #00BCD4?▾
Nutze die CSS-Eigenschaft: linear-gradient(135deg, #9C27B0, #00BCD4). Weise sie der background-Eigenschaft eines beliebigen Elements zu. Über den Winkel (135deg) änderst du die Richtung des Verlaufs.
Welche CSS-Eigenschaft erzeugt einen Verlauf?▾
Verläufe entstehen über die CSS-Eigenschaft background oder background-image mit Verlaufsfunktionen wie linear-gradient(), radial-gradient() oder conic-gradient(). Zum Beispiel: background: linear-gradient(to right, #9C27B0, #00BCD4);
Wie nutze ich diesen Verlauf in Tailwind CSS?▾
In Tailwind CSS nutzt du die Utility-Klassen: "bg-gradient-to-r from-[#9C27B0] to-[#00BCD4]". Die from- und to-Klassen setzen die Farbstopps. Ändere bg-gradient-to-r zu bg-gradient-to-br für eine diagonale Richtung.