CSS-Farbverlauf-Generator
Erstellen Sie lineare und radiale CSS-Farbverläufe ganz visuell. Farbstopps hinzufügen und verschieben, Winkel einstellen und das Ergebnis live sehen. Kopieren Sie den CSS-Code mit einem Klick oder speichern Sie den Verlauf als PNG-Hintergrundbild in beliebiger Größe. Kostenlos.
Typ
Form
Farbstopps
Klicken Sie auf den Balken, um einen Farbstopp hinzuzufügen. Ziehen Sie einen Stopp, um ihn zu verschieben.
Vorlagen
CSS-Code
So funktioniert’s
- Wählen Sie Linear oder Radial und stellen Sie den Winkel (bzw. die Form) ein.
- Klicken Sie auf den Balken, um einen Farbstopp hinzuzufügen, ziehen Sie Stopps zum Verschieben und ändern Sie die Farbe jedes Stopps.
- Kopieren Sie den CSS-Code oder wählen Sie eine Größe und speichern Sie den Verlauf als PNG.
Häufige Fragen
Welche Browser unterstützen CSS-Farbverläufe?
linear-gradient() und radial-gradient() funktionieren in allen modernen Browsern ohne Präfixe.
Was bedeutet der Winkel?
0° verläuft von unten nach oben, 90° von links nach rechts, 180° von oben nach unten.
Kann ich das PNG als Hintergrundbild oder Thumbnail-Hintergrund verwenden?
Ja. Wählen Sie 1920×1080, 1080×1920 oder eine eigene Größe und verwenden Sie es frei.