🌈 CSS-Verlauf-Generator
Erstelle in Sekunden wunderschöne lineare oder radiale CSS-Verläufe — wähle Farben, passe Winkel oder Form an, füge beliebig viele Farbstopps hinzu und kopiere den fertigen CSS-Code mit einem Klick. Komplett kostenlos und läuft vollständig in deinem Browser.
Über
Dieses Tool lässt dich CSS-Verläufe visuell erstellen, ohne eine einzige Zeile Code zu schreiben. Wähle zwischen linear-gradient und radial-gradient, stelle Winkel oder Form ein, verwalte Farbstopps mit einem Farbwähler und einem Positionsregler und sieh das Ergebnis live in Echtzeit. Acht integrierte Voreinstellungen (Sunset, Ocean, Aurora, Neon und mehr) verschaffen dir einen Vorsprung. Da jede Operation lokal in deinem Browser mit reinem JavaScript ausgeführt wird, verlassen keine Farbdaten oder Designinformationen dein Gerät — es gibt keinen Server, kein Konto und keinerlei Tracking.
Verwendung
- Wähle im Dropdown Gradient type einen Verlaufstyp — Linear oder Radial — aus.
- Für lineare Verläufe stellst du den Winkel (0–360°) mit dem Schieberegler oder dem Zahleneingabefeld ein. Für radiale Verläufe wählst du Ellipse oder Circle als Form.
- Klicke auf ein Farbmuster im Color-Stops-Panel, um den Farbwähler zu öffnen, und ziehe dann die Positionseingabe, um jeden Stopp genau dort zu platzieren, wo du ihn haben möchtest.
- Klicke auf + Add Stop, um einen neuen Farbstopp automatisch an der größten Lücke einzufügen, oder klicke auf die ✕-Schaltfläche, um einen Stopp zu entfernen (mindestens 2 Stopps erforderlich).
- Klicke auf Copy CSS, um die fertige background: linear-gradient(…)- oder radial-gradient(…)-Deklaration in die Zwischenablage zu kopieren und sie direkt in dein Stylesheet einzufügen.
Häufige Fragen
- Ist der CSS-Verlauf-Generator kostenlos?
- Ja, völlig kostenlos — kein Abonnement, kein Konto und keine versteckten Nutzungslimits. Öffne die Seite und lege sofort mit dem Erstellen von Verläufen los.
- Funktioniert dieses Tool offline ohne Internetverbindung?
- Ja. Sobald die Seite geladen ist, funktioniert das gesamte Tool offline — ohne externe API-Aufrufe, CDN-Abhängigkeiten oder Server-Anfragen. Es lässt sich sicher im Flugzeug oder in netzwerkbeschränkten Umgebungen nutzen.
- Werden meine Farbdaten oder mein Design an einen Server gesendet?
- Nein. Die gesamte Verlaufserstellung und Vorschau-Rendering findet lokal in deinem Browser per JavaScript statt. Deine Farbauswahl wird nur im localStorage deines Browsers gespeichert und niemals übertragen.
- Was ist der Unterschied zwischen linear-gradient und radial-gradient?
- Ein linear-gradient wechselt Farben entlang einer geraden Linie in einem bestimmten Winkel (z. B. 135deg). Ein radial-gradient strahlt Farben von einem Mittelpunkt nach außen in einer Ellipsen- oder Kreisform aus. Beide erzeugen Standard-CSS, das in allen modernen Browsern funktioniert.
- Wie viele Farbstopps kann ich hinzufügen?
- Es gibt kein integriertes Limit — du kannst so viele Farbstopps hinzufügen, wie du benötigst (mindestens 2). Neue Stopps werden automatisch an der größten Lücke im Verlauf platziert und die interpolierte Farbe an dieser Position wird vorab ausgefüllt, um einen sanften Ausgangspunkt zu bieten.