CSS-Gradient-Generator

Über CSS-Verläufe

Ein CSS-Verlauf ist eine sanfte Interpolation zwischen zwei oder mehr Farben, die der Browser direkt zeichnet – ohne Bilddatei. Lineare Verläufe verlaufen entlang einer geraden Linie im gewählten Winkel; radiale Verläufe strahlen von einem Mittelpunkt nach außen. Jeder Farbstopp hat eine Position von 0 % bis 100 % entlang der Verlaufslinie. Browser mischen standardmäßig in sRGB – je größer der Kontrast zwischen benachbarten Stopps, desto sichtbarer das Mischtonband dazwischen.

So nutzen Sie diesen Generator

Wähle einen Verlaufstyp; bei linearen Verläufen passt du den Winkel an (0° zeigt nach oben, 90° nach rechts, 180° nach unten). Jede Zeile in Farbstopps hat einen Farbwähler und eine Position – ziehe den Slider, gib einen Prozentwert ein oder klicke auf Stopp hinzufügen, um eine neue Farbe einzufügen. Wende ein Preset an, wenn du eine schnelle Startpalette möchtest. Das CSS-Feld unter der Vorschau zeigt die exakte background-Deklaration; klicke auf Kopieren und füge sie in dein Stylesheet ein.

Designtipps

Zweistopp-Verläufe zwischen analogen Farben (nahe beieinander auf dem Farbkreis) wirken ruhig und modern. Dreistopp-Verläufe mit einem Akzent in der Mitte können reichhaltig wirken, neigen aber leicht zum Matschigen – halte die Sättigung über die Stopps hinweg ähnlich. Für dunkle UI-Hintergründe kombiniere ein nahezu schwarzes Tonwert mit einem dunklen Farbton bei sehr geringem Kontrast (5–10 % Helligkeitsunterschied), damit der Verlauf gefühlt statt gesehen wird. Teste deinen Verlauf immer mit den realen Inhalten darüber – Text braucht über jedem Bereich des Verlaufs mindestens 4,5:1 Kontrast.

Häufig gestellte Fragen

Wie viele Farbstopps kann ich hinzufügen?

Dieses Tool ist auf fünf Stopps begrenzt – das deckt praktisch jeden UI-Verlauf ab, den du je ausliefern wirst. CSS selbst kennt kein Limit, doch über 4–5 Stopps verlierst du meist mehr an Klarheit, als du an Detail gewinnst. Für fotografische Übergänge sind ein SVG-Mesh oder ein echtes Bild besser geeignet.

Warum sieht mein linearer Verlauf anders aus als in einem anderen Tool?

Verschiedene Tools interpretieren den Winkel mitunter unterschiedlich – die CSS-Spezifikation nutzt 0° als oben und 90° als rechts, ältere Webkit-Syntax verwendete eine andere Referenz. Die Ausgabe hier nutzt die moderne Form linear-gradient(deg, ...), die in jedem aktuellen Browser ohne Präfix funktioniert.

Kann ich das für den Dark Mode verwenden?

Ja – kombiniere den Verlauf mit @media (prefers-color-scheme: dark) in deinem CSS und wähle dunklere Stopps. Du kannst die Verlaufsdeklaration auch in CSS-Variablen kapseln und die Werte pro Theme umschalten, sodass der Rest deines CSS unangetastet bleibt.

Beeinträchtigen Verläufe die Performance?

Auf moderner Hardware nein – sie werden wie jeder andere Hintergrund auf der GPU gezeichnet. Spürbar werden die Kosten allenfalls bei riesigen, mit 60 fps animierten Vollbild-Radialverläufen oder auf sehr alten Mobilgeräten. Für einen statischen Panel-Hintergrund sind die Kosten vernachlässigbar.

Kann ich einen Verlauf animieren?

CSS animiert background-image nicht direkt, du kannst aber background-position auf einem überdimensionierten Verlauf animieren oder mit @property und Custom Properties die Stoppfarben interpolieren. Achte in jedem Fall auf Reduced-Motion-Fallbacks für Nutzer, die das anfordern.

Werden radiale Verläufe überall unterstützt?

Ja. linear-gradient() und radial-gradient() sind seit über einem Jahrzehnt in jedem großen Browser verfügbar. Die Ausgabe hier nutzt die Standardform (ohne Vendor-Präfixe) und funktioniert bis zu den ältesten Evergreen-Browsern.

CSS-Gradient-Generator