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

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.

A Ja, animieren ist möglich, aber der Generator liefert keinen Animationscode. Die Ausgabe ist eine statische background-image-Eigenschaft. Für Bewegung packst du sie in eine @keyframes-Regel, die background-position verschiebt oder Farben über Zeit ändert. Ein bewährter Trick: mach den Verlaufshintergrund 3x breiter als das Element und animiere background-position von 0 auf 100%. Das ergibt eine sanfte Farbwelle – ideal für Lade-Spinner oder Hero-Bereiche.

A Ziehe den Winkel-Schieberegler auf 90 Grad, dann kippt der Verlauf von links-nach-rechts zu oben-nach-unten. Mit 180 Grad kehrst du ihn komplett um. Für einen Diagonaleffekt probiere 45 oder 135 Grad – die werden oft in Hero-Bereichen genutzt. Die Vorschau aktualisiert sich live, du siehst die Änderung sofort. Die Farbstopps musst du nicht anpassen, außer du willst eine andere Gewichtung.

A Nein, der Generator erzeugt nur CSS-Code. Für Mockups machst du einen Screenshot der Vorschau oder kopierst die Hex-Werte in dein Designtool. Figma und Sketch akzeptieren CSS-Verläufe direkt. Wenn du ein Pixelbild brauchst, stell den Winkel auf 180 Grad und nutze das Screenshot-Tool deines Systems bei 200% Zoom. So erhältst du ein scharfes 2x-Asset für Oberflächen. Die Hex-Farben stimmen zwischen Browser und Designsoftware exakt überein, dein Mockup bleibt also originalgetreu.

A Nein, das Tool gibt nur die komplette background-image-Deklaration aus. Du kannst sie aber manuell kürzen: Nimm den Inhalt der Klammern nach linear-gradient und setze ihn als `background: linear-gradient(...)` ein. Das spart etwa 30 Zeichen pro Regel. Für schnelle Entwürfe kopieren viele das volle Snippet in einen CSS-to-JSON-Konverter. Tipp: Behalte die Langform, sie ist lesbarer und einfacher zu debuggen. Kurzform spart Bytes, Langform spart Kopfschmerzen.