CSS-Gradient-Generator: Schöne Verläufe erstellen | Kostenlos

A Farben wählen, Typ und Winkel einstellen, CSS kopieren.

A Ja.

A Um sicherzustellen, dass Ihre CSS-Farbverläufe perfekt zur visuellen Identität Ihrer Marke passen, verwenden Sie die benutzerdefinierten Farbeingabefelder. Fügen Sie einfach Ihre spezifischen Hex-Codes (z.B. #RRGGBB) in die Farbwähler ein. So können Sie Farbverläufe mit Ihren exakten Markenfarben generieren und die Konsistenz über alle Ihre Webelemente hinweg gewährleisten. Passen Sie den Winkel an und fügen Sie bei Bedarf weitere Farbstopps hinzu, um den gewünschten Effekt zu erzielen.

A Um einen mehrfarbigen CSS-Farbverlauf zu gestalten, klicken Sie einfach auf die Schaltfläche "Farbe hinzufügen" oder eine ähnliche Anzeige, die sich normalerweise zwischen oder neben den vorhandenen Farbwählern befindet. Dadurch wird ein zusätzlicher Farbstopp eingeführt. Sie können dann eine neue benutzerdefinierte Hex-Farbe für diesen Stopp auswählen und deren Position entlang der Verlaufsleiste anpassen, um einen sanften oder abrupten Übergang mit der gewünschten Mischung aus mehreren Farben zu erzielen.

A Lineare Verläufe fließen in einer geraden Linie, entweder horizontal, vertikal oder diagonal. Sie steuern die Richtung mit dem Winkelregler, z.B. auf 90 Grad für einen vertikalen Übergang. Radiale Verläufe dehnen sich von einem zentralen Punkt nach außen aus und erzeugen einen kreisförmigen oder elliptischen Effekt. Sie können die Form über kreisförmig hinaus mit diesem Werkzeug nicht direkt steuern, aber Sie können den Mittelpunkt festlegen.

A Der Generator erzeugt standardkonformes CSS für Chrome, Firefox, Safari und Edge. Der Internet Explorer 9 und älter zeigt keine Farbverläufe an – das betrifft heute weniger als 1% des weltweiten Traffics. Für alte Browser platzieren Sie vor der Gradient-Eigenschaft eine einfache Hintergrundfarbe als Fallback. So sehen Nutzer zumindest eine Volltonfarbe. Ein schneller Test: Fügen Sie den Code in die Entwicklertools eines modernen Browsers ein.

A Streifenbildung tritt auf, wenn Farbübergänge als sichtbare Linien erscheinen. Meistens ist der Grund, dass der Verlauf zu viele Pixel ohne genügend Farbstopps überspannt. Für einen Full-Width-Hero-Bereich fügst du einfach einen dritten Farbstopp zwischen deinen beiden Hauptfarben hinzu. Bei großen Hintergründen (1920px+) kann background-attachment: fixed die Streifenbildung reduzieren. Unser Generator erzeugt saubere Ausgaben, aber Browser rendern unterschiedlich. Ein schneller Tipp: Verwende Farben mit ähnlicher Helligkeit für weichere Übergänge.

A Ihr Verlauf respektiert systemseitige Hochkontrasteinstellungen, aber das Tool simuliert sie nicht. Kontrastprobleme treten meist auf, wenn zwei Farben ähnlich hell sind — etwa Pastellgelb neben blassem Pink. Ein einfacher Test: Wandeln Sie beide Hex-Codes in HSL um und stellen Sie sicher, dass deren L-Werte mindestens 30 Punkte auseinanderliegen. Für Hero-Bereiche testen Sie den Verlauf im Windows-Hochkontrastmodus oder mit einem Browser-Add-on wie Axe. Die 12 Voreinstellungen wurden barrierefrei gewählt, benutzerdefinierte Farben liegen in Ihrer Verantwortung.

A Diese Version hat keine Speicherfunktion. Einfacher Workaround: Kopiere das CSS in eine Textdatei, einen CodePen-Snippet oder das Snippets-Panel deiner Browser-DevTools. Viele Designer legen eine „gradients.css“-Datei im Projektordner an – mit 5–10 Favoriten zum schnellen Einfügen. Dauert einmalig 10 Sekunden, danach sparst du jedes Mal Zeit.