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

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.

A Die Vorschau hier nutzt einen schlichten Hintergrund, aber in deinem Projekt können andere CSS-Regeln den Verlauf stören. Prüfe, ob irgendwo eine background-color definiert ist oder ein CSS-Reset die background-image entfernt. Außerdem bezieht sich der Winkel auf die Box des Elements – 45 Grad auf einem schmalen Button wirken anders als auf einem breiten Hero-Bild. Kopiere den Code in eine leere Testdatei ohne zusätzliche Styles. Meist findest du den Übeltäter so in unter fünf Minuten.

A Das Tool liefert reinen Web-Code, aber du übernimmst die Hex-Werte mit wenigen Klicks in deine Design-Software. Kopiere die Farbwerte direkt aus den Reglern in Adobes Füllungsoptionen oder Figmas Design-Tab. Viele Entwickler nutzen diesen Workflow, um UI-Prototypen vor dem Coden abzustimmen. Bedenke nur, dass Grafikprogramme Winkel oft minimal anders interpretieren als Browser.

A Mehr als vier Farbstopps vergrößern zwar minimal die CSS-Datei, aber Browser rendern Farbverläufe direkt ohne Bilddateien. Das lädt deutlich schneller als eine 500 KB große PNG-Grafik. Nutze am besten zwei oder drei Stopps für schlanken Code, der deinen Server schont.