Gradient Generator

Den Verlauf-Generator verwenden

1. Wähle zwei Farben aus den Farbwählern. Diese werden zu Start- und Endstopp; der Browser interpoliert jeden Pixel dazwischen standardmäßig im sRGB-Farbraum.
2. Wähle den Verlaufstyp - linear für direktionale Farbwäschen, radial für von-Mitte-nach-außen-Glühen und Scheinwerfer.
3. Stelle den Winkel ein (nur linear). 0deg blendet von unten nach oben, 90deg von links nach rechts, 180deg von oben nach unten. Das entspricht der CSS-Images-Level-3-Konvention, wo Winkel im Uhrzeigersinn von oben drehen.
4. Überprüfe die Live-Vorschau. Das Farbfeld zeigt die genauen Pixel, die der Browser malt - keine versteckte Nachbearbeitung.
5. Klicke auf "CSS kopieren", um die background-image-Deklaration in jedes Stylesheet, beliebigen Tailwind-Wert oder CSS-in-JS-Objekt einzufügen.

Was ein CSS-Verlauf tatsächlich ist

Ein CSS-Verlauf ist keine Bilddatei - er ist ein generierter <image>-Wert, der durch die linear-gradient()- oder radial-gradient()-Funktionen erzeugt wird, die in der CSS-Images-Modul-Level-3-Spezifikation definiert sind. Der Browser löst diese Funktionen zur Malzeit auf und sampelt die interpolierte Farbe für jeden Pixel innerhalb des Hintergrundmalbereichs. Weil nichts in eine Datei gerastert wird, skalieren Verläufe verlustfrei von einem 24px-Favicon bis zu einem 4K-Hero-Hintergrund ohne Verpixelung.

Im Hintergrund laden Compositors wie Chromes Skia, Firefoxs WebRender und Safaris Core Animation Verlaufstopps als kurzen Texturstreifen hoch und strecken ihn über den Hintergrundpositionierungsbereich des Elements. Deshalb bleiben Verläufe günstig, selbst wenn sie den gesamten Viewport abdecken - die GPU macht einen einzigen Shader-Durchgang, keine Pixel-für-Pixel-CPU-Berechnung. Die Interpolation folgt dem sRGB-Farbraum, es sei denn, du entscheidest dich für in oklch oder in lab (Chrome 111+, Safari 16.2+), was den trüben grauen Mittelpunkt vermeidet, den du beim Blau-zu-Gelb-Blenden in sRGB bekommst.

Wann du zu einem Verlauf greifst

• Hero-Abschnitt-Hintergründe, die Tiefe benötigen ohne das Gewicht einer JPEG.
• Schaltflächen- und CTA-Füllungen, wo ein subtiler Zwei-Stopp-Verlauf taktiler wirkt als eine flache Farbe.
• Skeleton-Loader, die einen diagonalen Verlauf verwenden, der mit background-position für einen Shimmer-Sweep animiert wird.
• Glassmorphism-Karten, die über einem bunten Verlaufshintergrund mit backdrop-filter: blur() geschichtet sind.
• Diagramm-Füllungen, wenn du möchtest, dass ein Balken von hoher Sättigung an der Basis zu niedriger Sättigung an der Spitze verblasst.
• SVG-Fallbacks - ein als Maske oder border-image-Quelle verwendeter Verlauf vermeidet das Versenden eines weiteren Assets über das Netzwerk.

Fallstricke, die Menschen überraschen

• Das "graue Mitte"-Problem. Ein Rot-zu-Grün-sRGB-Verlauf geht durch stumpfes Olivgrün. Zu linear-gradient(in oklch, red, green) wechseln für eine wahrnehmungsgleichmäßige Rampe - aber caniuse.com/css-color-4 prüfen, weil ältere Safari-Builds auf sRGB zurückfallen.
• Banding auf 8-Bit-Displays. Sehr subtile Zwei-Stopp-Verläufe über große Bereiche können diagonale Streifen zeigen. Eine winzige background-blend-mode: overlay-Rauschtextur hinzufügen, oder filter: contrast(1.005) verwenden, bricht die Bänder auf.
• Winkelrichtungsverwirrung. CSS-Winkel beginnen bei 12 Uhr und drehen im Uhrzeigersinn. Entwickler von Sketch oder Figma erwarten 0deg bei 3 Uhr - immer in der Vorschau verifizieren.
• Harte Stopps vs. sanfte Rampen. linear-gradient(red 50%, blue 50%) erzeugt einen scharfen Split, keine Überblendung. Nützlich für Zwei-Ton-Schaltflächen; überraschend, wenn man die Prozentsätze vergisst.
• Wiederholende Verläufe, die unerwartet kacheln. repeating-linear-gradient braucht einen endgültigen Stopp mit fester Länge (wie 20px), nicht einen Prozentsatz, sonst füllt es das gesamte Element als einzelnen Zyklus.

Ein bisschen Hintergrund zur Spezifikation

CSS-Verläufe traten als proprietäre WebKit-Syntax um 2008 auf der Plattform auf und wurden in CSS-Images-Modul-Level-3 standardisiert. Die aktuelle Grammatik unterstützt eine beliebige Anzahl von Farbstopps, Prozent- oder Längenpositionen, to-Schlüsselwort-Richtungen (to bottom right), konische Verläufe für Tortendiagramm-Effekte und den Level-4-in <Farbraum>-Hinweis für wahrnehmungsorientierte Interpolation. Die Unterstützung für lineare und radiale Verläufe ist seit IE10 und Android 4.4 universell, sodass du sie ohne Präfix oder Fallback im heutigen Web verwenden kannst. Konische Verläufe benötigen Firefox 83+ und waren der letzte Nachzügler. Für die Barrierefreiheit werden Verläufe von Bildschirmlesern als dekorative Hintergründe behandelt - sie stellen niemals Stopp-Farben dar, also sicherstellen, dass der Vordergrundtext mindestens WCAG-AA-4.5:1-Kontrast gegen den dunkelsten Punkt des darunter liegenden Verlaufs behält.

Verläufe vs. Alternativen

Im Vergleich zu einem exportierten PNG- oder JPEG-Hintergrund spart ein CSS-Verlauf eine Netzwerkanfrage, skaliert perfekt bei jeder DPR und ist mit CSS-Custom-Properties trivial gestaltbar. Im Vergleich zu SVG-<linearGradient> verliert die CSS-Version bei Mittelstopp-Transformationen und komplexen Verlaufsgittern, gewinnt aber bei Kürze - eine Zeile gegenüber einem ganzen <defs>-Block. Im Vergleich zu Tailwinds bg-gradient-to-r from-x to-y-Hilfsprogrammen erlauben handgeschriebene Verläufe das Verwenden benutzerdefinierter Winkel und mehr als zwei Stopps ohne Sonderfall-Werte. Für animierte Verläufe kann CSS keine Stopps direkt in einem @keyframes-Block interpolieren - du musst background-position auf einem größeren-als-Viewport-Verlauf animieren, oder auf Houdinis Paint API für Farbberechnungen pro Frame zurückfallen. Wenn du eine echte Verlaufsanimation mit Stopp-Kontrolle pro Frame brauchst, schlägt SVG + SMIL oder WebGL CSS jedes Mal.