CSS-Verlaufsgenerator
Gestalten Sie lineare und radiale Verläufe visuell und kopieren Sie dann das einsatzbereite CSS. Alles wird live in Ihrem Browser aktualisiert.
So erstellen Sie einen CSS-Verlauf
- Wählen Sie linear oder radial und legen Sie dann den Winkel für einen linearen Verlauf fest.
- Wählen Sie Farben für Ihre Stopps und legen Sie jede Position von 0 bis 100 fest.
- Fügen Sie Stopps hinzu oder entfernen Sie sie, um den Übergang nach Belieben zu gestalten.
- Kopieren Sie das generierte CSS in Ihr Stylesheet oder Style-Attribut.
FAQ
Was ist ein linearer Verlauf?
Ein linearer Verlauf mischt Farben entlang einer geraden Linie in dem von Ihnen gewählten Winkel, von 0 bis 360 Grad.
Was ist ein radialer Verlauf?
Ein radialer Verlauf mischt Farben von einem Mittelpunkt nach außen in kreisförmiger oder elliptischer Form.
Was bedeuten die Positionszahlen?
Jede Position ist ein Prozentsatz entlang des Verlaufs, von 0 % am Anfang bis 100 % am Ende. Die Stopps werden automatisch nach Position sortiert.
Funktioniert der Verlauf in allen Browsern?
Ja. Das generierte CSS verwendet die standardmäßigen Funktionen linear-gradient und radial-gradient, die von jedem modernen Browser unterstützt werden.
Ähnliche Tools
Warum einen Verlaufsgenerator verwenden?
Nutzen Sie den CSS-Verlaufsgenerator, um sanfte Farbübergänge visuell zu gestalten, statt Werte im Code zu erraten, und kopieren Sie sofort produktionsfertiges CSS.
- Den Verlauf live ändern sehen, während Sie Farben, Winkel und Stopps anpassen.
- Exaktes, gültiges CSS kopieren, ohne nach Syntaxfehlern zu suchen.
- Mehrstufige Hintergründe für Buttons, Banner und Bereiche in Sekunden erstellen.
Tipps und Grenzen
Sie können beliebig viele Farbstopps hinzufügen, und der Generator behält mindestens zwei, damit der Verlauf immer gültig ist. Die Stopps werden vor der CSS-Erzeugung nach Position sortiert.