CSS-Verlauf-Generator
Gestalten Sie einen Verlauf und kopieren Sie fertigen CSS-Code.
- Sofort
- Kostenlos
- Privat (lokal verarbeitet)
- Ohne Anmeldung
Der perfekte Verlauf — ohne eine Zeile CSS zu schreiben
Verläufe sind im modernen Design allgegenwärtig: Hero-Hintergründe, Buttons, Karten, dekorativer Text. Mit diesem Generator gestalten Sie sie visuell — Farben, Positionen, Winkel, Typ — und kopieren sauberen, produktionsreifen CSS-Code.
-
Typ wählen
Linear für einen gerichteten Übergang, radial für einen zentralen Halo, konisch für Rad- oder Kuchen-Effekte.
-
Farben und Positionen anpassen
Ändern Sie jede Farbe mit dem Wähler, verschieben Sie ihre Position mit dem Regler, fügen Sie bis zu 6 Stopps hinzu. Der Zufallsbutton schlägt harmonische Kombinationen vor.
-
CSS kopieren
Der Code wird in Echtzeit aktualisiert. Ein Klick und er ist in Ihrer Zwischenablage.
Drei Funktionen, drei Geometrien
| Funktion | Geometrie | Typischer Einsatz |
|---|---|---|
| linear-gradient(Winkel, …) | Ausgerichtete Gerade | Hintergründe, Buttons, Overlays |
| radial-gradient(circle, …) | Konzentrische Kreise | Halos, Spots, Vignetten |
| conic-gradient(from Winkel, …) | Rotation ums Zentrum | Kuchendiagramme, Farbkreise, animierte Ränder |
Tipps für gelungene Verläufe
- Bleiben Sie bei benachbarten (analogen) Farbtönen für ein weiches Ergebnis; gegensätzliche Töne durchqueren matte Grauzonen.
- Für Verlaufstext kombinieren Sie background-clip: text mit color: transparent.
- Auf großen Flächen hilft ein dezentes Rauschen gegen sichtbare Streifen (Banding).
- Achten Sie auf Kontrast: Text auf einem Verlauf muss über die gesamte Farbspanne lesbar bleiben.
Der generierte Code verwendet Hexfarben für maximale Kompatibilität. In Ihrem Projekt können Sie sie durch CSS-Variablen (var(--meine-farbe)) ersetzen.
Häufige Fragen
Was ist der Unterschied zwischen linear, radial und conic?
linear-gradient verläuft geradlinig in einem Winkel; radial-gradient strahlt vom Zentrum nach außen; conic-gradient dreht sich um das Zentrum wie ein Farbkreis. Alle drei akzeptieren dieselben Farblisten.
Wie viele Farben kann ich verwenden?
Das Tool unterstützt bis zu 6 Stopps, was fast jeden Bedarf abdeckt. In reinem CSS ist die Anzahl unbegrenzt, aber ab 4 oder 5 Farben wird ein Verlauf schnell schwer zu kontrollieren.
Was bedeuten die Prozentwerte neben den Farben?
Das ist die Position des Stopps entlang der Verlaufsachse: 0 % am Anfang, 100 % am Ende. Zwei nahe Stopps erzeugen einen harten Übergang, zwei entfernte einen weichen.
Funktioniert der generierte Code in allen Browsern?
linear-gradient und radial-gradient werden seit Jahren überall unterstützt. conic-gradient ist in allen modernen Browsern verfügbar (Chrome 69+, Firefox 83+, Safari 12.1+).
Wie animiere ich einen CSS-Verlauf?
Verläufe lassen sich nicht direkt animieren, aber zwei Techniken funktionieren gut: background-position auf einem überdimensionierten Verlauf animieren (background-size: 200 %) oder Farben über mit @property registrierte Custom Properties animieren.