CSS-Verlaufsgenerator: Verläufe von Hand oder mit Tools schreiben

Ein CSS-Verlaufsgenerator gibt dir einen Verlaufswert zum Einfügen, etwa linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%), nachdem du Farben und einen Winkel gewählt hast. Als Startpunkt ist das gut. Aber ein CSS-Verlauf ist kurz genug, um ihn in unter einer Minute von Hand zu schreiben, und im handgeschriebenen Code stecken die Verbesserungen: ein dritter Stopp, ein besserer Farbraum, eine zweite Ebene. Diese Seite zeigt, wie du Generator-Code liest, säuberst und deinen eigenen schreibst.

Die vier Teile jedes CSS-Verlaufs

.hero {
  background-image: linear-gradient(
    160deg            /* 1. direction: an angle or "to right" */
    in oklch,         /* 2. optional: the colour space to blend in */
    #1e1b4b 0%,       /* 3. colour stops: colour and position */
    #6d28d9 55%,
    #f472b6 100%
  );
}

/* 4. the type: linear, radial or conic */
.glow { background-image: radial-gradient(circle at 80% 20%, #f472b6, #1e1b4b 70%); }
.dial { background-image: conic-gradient(from 90deg, #6d28d9, #f472b6, #6d28d9); }

Jeder Typ hat einen eigenen Leitfaden: lineare Verläufe, radiale Verläufe und konische Verläufe.

Verlaufsrezepte zum Kopieren

Diese sind von Hand geschrieben statt generiert, und jedes nutzt eine Idee, die ein einfacher Generator selten liefert: ein Licht außerhalb der Mitte, drei Stopps statt zwei oder einen gewählten Farbraum. Klick auf einen, um ihn zu kopieren.

So räumst du Generator-Code auf

Fügst du Code aus einem älteren Generator ein, bekommst du womöglich fünf Zeilen, wo eine reicht. Verläufe mit Präfix und der Internet-Explorer-Filter sind seit Jahren unnötig; sie machen den Code schwerer und nutzen im Fall der alten -webkit--Syntax ein anderes Winkelsystem, das jeden verwirrt, der später daran arbeitet.

.hero {
  background-color: #1e1b4b; /* shows while loading and if the gradient fails */
  background-image: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

Auch dein Browser ist ein ordentlicher Generator. Öffne die Entwicklertools, wähle das Element und klicke im Styles-Panel auf ein beliebiges Farbfeld im Verlauf: Du bekommst einen Farbwähler für diesen Stopp und kannst Winkel und Prozente direkt bearbeiten, während sich die Seite live aktualisiert. Kopier den fertigen Wert zurück in dein Stylesheet. Um einen Verlauf an echtem Inhalt abzustimmen, schlägt das jedes eigenständige Tool, weil du ihn hinter deiner echten Überschrift siehst.

Fünf Änderungen, die jeden Regler schlagen

1. 1

   Einen mittleren Stopp ergänzen

   Zwei Stopps ergeben eine gerade Rampe. Eine dritte Farbe bei etwa 50 bis 60 Prozent bringt Tiefe und lässt dich steuern, wo der Wechsel passiert.

2. 2

   Den Farbraum wählen

   Ergänze in oklab, damit Übergänge zwischen weit entfernten Farben sauber bleiben, oder in oklch, damit der Farbton wandert. Verlaufsinterpolation zeigt den Unterschied.

3. 3

   Das Licht aus der Mitte rücken

   Tausch einen linearen Verlauf gegen radial-gradient(circle at 80% 20%, ...), damit die hellste Farbe wie eine Lichtquelle aus einer Ecke kommt.

4. 4

   Zwei oder drei Verläufe schichten

   Trenne mehrere Werte in background-image mit Kommas. Radiale Lichter über einer linearen Basis wirken viel reicher als ein einzelner Verlauf; CSS-Mesh-Gradients gehen noch weiter.

5. 5

   Etwas Körnung ergänzen

   Eine feine Rauschebene kaschiert Streifenbildung in großen, dunklen Verläufen. Der Code steht in CSS-Rauschtextur.

.hero {
  background-color: #0f0b1e;
  background-image:
    radial-gradient(circle at 80% 15%, #f472b6 0%, transparent 40%),
    radial-gradient(circle at 15% 85%, #4338ca 0%, transparent 45%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}

Einen Verlauf zum wiederverwendbaren Token machen

Sitzt ein Verlauf, gib ihm einen Namen. Eine Custom Property hält den ganzen Wert, sodass Buttons, Banner und der Hero ihn teilen können, und ein Redesign berührt eine Zeile. CSS-Variablen fürs Theming zeigt, wie du Verlaufstokens pro Marke oder Modus austauschst.

:root {
  --gradient-brand: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

.hero { background-image: var(--gradient-brand); }
.badge { background-image: var(--gradient-brand); }

Wann ein Generator nicht das richtige Werkzeug ist

Generatoren und handgeschriebenes CSS teilen dieselbe Grenze: Das Ergebnis ist eine Liste von Stopps, die jeder in deinem Stylesheet lesen und wiederverwenden kann. Für Interface-Details ist das in Ordnung. Für den Hintergrund, an dem man dich erkennt, auf deiner Website und in jedem Post, willst du vielleicht etwas Reicheres, das schwerer zu kopieren ist. Den allgemeineren Rat findest du in wie du einen Verlaufsgenerator nutzt.

Gradiently Marks gehen über das hinaus, was CSS beschreiben kann: geschichtete Materialien, Licht, Körnung und Bewegung, live in jeder Größe gerendert, mit genau einem Besitzer zur Zeit. Du kannst mit jedem noch nicht gesicherten Mark kostenlos gestalten und im Markt mit Farbwörtern nach einem suchen, der dem Verlauf nahekommt, den du schreiben wolltest.