CSS-Gradient-Generator — Verläufe in deinem Browser bauen
Gestalte einen Verlauf visuell und kopiere das CSS mit einem Klick.
Dieses Tool läuft komplett in deinem Browser. Deine Dateien werden nie hochgeladen — sie bleiben auf deinem Gerät.
- 0%
- 100%
background: linear-gradient(90deg, #6d28d9 0%, #ec4899 100%);Die Verlauf-Syntax von Hand zu schreiben ist fummelig — ein falscher Prozentwert oder eine vergessene Einheit, und der ganze Hintergrund bleibt einfarbig. Mit diesem Generator baust du den Verlauf visuell: Füge so viele Farbstopps hinzu, wie du möchtest, ziehe ihre Positionen, wechsle zwischen linear und radial und beobachte, wie sich die Vorschau sofort aktualisiert.
Alles läuft in deinem Browser. Es gibt keine Anmeldung, keinen Server-Roundtrip und nichts zu installieren — das CSS wird auf deinem Gerät in dem Moment erzeugt, in dem du eine Einstellung änderst, und ist bereit, direkt in dein Stylesheet kopiert zu werden.
So verwendest du CSS-Gradient-Generator
- Wähle einen Verlaufstyp — linear oder radial.
- Lege bei einem linearen Verlauf den Winkel in Grad fest.
- Passe jeden Farbstopp mit der Farbauswahl und seinem Positionsregler an.
- Füge Stopps hinzu oder entferne sie, bis die Vorschau passt.
- Klicke auf „CSS kopieren“, um die erzeugte background-Regel zu kopieren.
Häufig gestellte Fragen
Welches CSS erzeugt das?
Es gibt eine einzelne background-Eigenschaft mit der Standardfunktion linear-gradient() oder radial-gradient() aus, sodass du sie direkt in jedes Stylesheet oder jeden Inline-Stil einfügen kannst.
Wie viele Farbstopps kann ich hinzufügen?
So viele, wie du brauchst. Jeder Stopp hat seine eigene Farbe und Position, und der Verlauf aktualisiert sich live, während du sie hinzufügst, bearbeitest oder entfernst.
Gilt der Winkel auch für radiale Verläufe?
Nein. Der Winkel wirkt sich nur auf lineare Verläufe aus. Radiale Verläufe breiten sich vom Zentrum nach außen aus, daher wird die Winkelsteuerung ausgeblendet, wenn radial gewählt ist.
Wird irgendetwas an einen Server gesendet?
Nein. Das Tool läuft vollständig in deinem Browser. Deine Farben und das erzeugte CSS verlassen dein Gerät niemals.