CSS-Gradient-Generator
Kostenloser Online-CSS-Gradient-Generator, Echtzeit-Vorschau
CSS-Gradient-Typen
Lineare Farbverläufe übergehen Farben entlang einer durch einen Winkel oder eine Richtung definierten geraden Linie. Radiale Farbverläufe übergehen von einem Mittelpunkt nach außen in einer kreisförmigen oder elliptischen Form. Beide unterstützen mehrere Farbstops für komplexe Übergänge zwischen drei oder mehr Farben.
So erstellen Sie einen CSS-Gradient
Wählen Sie den Gradient-Typ (linear oder radial), wählen Sie Start- und Endfarben und passen Sie den Winkel für lineare Gradienten an. Das Tool generiert den CSS-Code sofort. Kopieren Sie das CSS und fügen Sie es in Ihr Stylesheet als background- oder background-image-Eigenschaft ein.
▶Kann ich mehr als zwei Farben in einem Gradient verwenden?
Ja, CSS-Gradienten unterstützen unbegrenzte Farbstops. Fügen Sie zusätzliche Farben hinzu, indem Sie den generierten CSS-Code mit zusätzlichen Farbwerten bearbeiten, die durch Kommas getrennt sind.
▶Wie ist die Browserunterstützung für CSS-Gradienten?
CSS-Gradienten werden von allen modernen Browsern unterstützt. Für ältere Browser benötigen Sie möglicherweise Vendor-Präfixe (-webkit-gradient) oder eine feste Ersatzfarbe.
▶Kann ich Transparenz in Gradienten verwenden?
Ja. Verwenden Sie rgba()- oder hsla()-Farbwerte, um Transparenz einzuschließen. Beispiel: linear-gradient(135deg, rgba(255,0,0,0.5), transparent) erzeugt einen halbtransparenten roten Farbverlauf.