Alles läuft lokal in deinem Browser. Es wird nichts hochgeladen.

CSS-Verlaufsgenerator

Nutze dieses Werkzeug, um lineare und radiale CSS-Verläufe mit bearbeitbaren Farbstopps zu erstellen. Die Ergebnisse werden sofort aktualisiert und bleiben auf deinem Gerät.

Alles läuft lokal in deinem Browser. Es wird nichts hochgeladen.

CSS-Verlauf erstellen

Verlaufstyp

Farbstopps

Verlaufsvorschau

CSS-Verlaufsgenerator

Nutze dieses Werkzeug, um lineare und radiale CSS-Verläufe mit bearbeitbaren Farbstopps zu erstellen.

Die Verarbeitung erfolgt mit JavaScript im Browser, sodass du private Daten testen kannst, ohne sie an einen externen Dienst zu senden.

So verwendest du dieses Werkzeug

  1. Wählen Sie einen Verlaufstyp

    Wählen Sie linear oder radial. Passen Sie für lineare Farbverläufe den Winkelregler an.

  2. Farbstopps bearbeiten

    Wählen Sie Farben aus, legen Sie Positionen von 0 bis 100 Prozent fest und fügen Sie nach Bedarf Stopps hinzu oder entfernen Sie sie.

  3. Kopieren Sie den CSS

    Sehen Sie sich den Farbverlauf in der Vorschau an und kopieren Sie die background-Deklaration in Ihr CSS.

FAQ

Lädt dieser CSS-Gradientengenerator etwas hoch?

Nein. Der Farbverlauf wird lokal in Ihrem Browser generiert.

Kann ich radiale Farbverläufe erstellen?

Ja. Ändern Sie den Typ von Linear in Radial, um einen radial-gradient background zu generieren.

Wie viele Farbstopps kann ich hinzufügen?

Sie können mehrere Farbstopps hinzufügen und jede Position auf einen Wert von 0 bis 100 Prozent einstellen.

Welches CSS gibt es aus?

Die Ausgabe ist eine background-Deklaration, die Sie in ein Stylesheet oder ein style-Attribut einfügen können.