Dezenter Hero-Verlauf
CSS
.hero { background: linear-gradient(135deg, #6c8cff 0%, #b18cff 100%);}Zweifarbiger Diagonal-Verlauf. Der klassische Indie-SaaS-Hero-Look — angenehm fürs Auge und freundlich zu Text.
CSS-Verlaufsgenerator
CSS-Verläufe visuell gestalten mit Live-Code-Ausgabe.
Zuletzt aktualisiert
Vorschau2 Stopps
Farbstopps
- 0%
- 100%
CSS
background: linear-gradient(135deg, #b18cff 0%, #5ac8c8 100%);Was ist ein CSS-Gradient-Generator?
Ein CSS-Gradient-Generator ist ein visueller Editor für die CSS-Funktionen linear-gradient, radial-gradient und conic-gradient. Du musst die Color Stops nicht mehr von Hand tippen: Farben auf einer Leiste verschieben, Vorschau beobachten, fertiges CSS kopieren — und es passt direkt ins Stylesheet.
Verläufe stecken überall in moderner UI: Hero-Sections, Card-Overlays, Button-Zustände, Glow-Effekte, dezente Dark-Mode-Akzente, Loading-Skeletons, dekorative Borders. Wer Gradients von Hand lesen und schreiben kann, ist schneller — aber zum Skizzieren von Ideen ist ein visueller Generator unschlagbar.
CSS kennt drei Gradient-Typen. *Linear* läuft entlang einer geraden Linie unter beliebigem Winkel. *Radial* strahlt von einem Punkt aus kreis- oder ellipsenförmig nach außen. *Conic* zieht die Farben wie ein Uhrzeiger um einen Mittelpunkt herum. Jeder Typ hat seine eigenen Anwendungsfälle — und du kannst mehrere Verläufe auf einem Hintergrund stapeln.
Was du beim Bauen von Verläufen lernst
- Ein Gradient wird durch *Richtung* (oder Form) und *Color Stops* definiert — also Farben mit optionaler Position.
- Zwei Color Stops an derselben Position erzeugen eine *harte Kante* — perfekt für Streifen oder zweigeteilte Hintergründe.
- Moderne Farbräume wie
oklchliefern weichere, perzeptiv gleichmäßigere Übergänge alsrgboderhsl.
Schritt für Schritt zum CSS-Gradient
Gradient-Typ wählen
Linear für einen geraden Farbverlauf, radial für einen kreisförmigen Fade, conic für einen Sweep um einen Mittelpunkt.
Winkel oder Position festlegen
Bei linear einen Winkel in Grad angeben (
0degläuft in CSS von unten nach oben). Bei radial und conic legst du die Mittelposition fest.Color Stops anlegen und anordnen
Füge so viele Farben hinzu, wie du willst. Ziehe jeden Stop an seine Position auf der Leiste. Zwei Stops an derselben Position ergeben eine harte Kante.
An echter Form vorschauen
Wechsle zwischen Hero in voller Breite, Card und Button, um zu sehen, wie der Verlauf bei verschiedenen Seitenverhältnissen wirkt.
CSS kopieren
Kopiere die fertige
background-Deklaration und füge sie in dein Stylesheet ein.
CSS-Gradient-Spickzettel
Die drei Gradient-Funktionen und die Bausteine, die hineingehören. Vollständige Referenz auf MDN: linear-gradient, radial-gradient, conic-gradient.
| Funktion | Was sie macht | Beispiel |
|---|---|---|
linear-gradient | Farbverlauf entlang einer Linie | linear-gradient(135deg, #6c8cff, #b18cff) |
radial-gradient | Farbe strahlt von einem Punkt aus | radial-gradient(circle at 30% 20%, #fff, #000) |
conic-gradient | Farbe rotiert um einen Mittelpunkt | conic-gradient(from 0deg, red, yellow, red) |
repeating-linear-gradient | Gekacheltes Streifenmuster | repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) |
| Color Stop | Eine Farbe mit optionaler Position | #6c8cff 25% |
| Harter Stop | Gleiche Position zweimal → scharfe Kante | #000 50%, #fff 50% |
| Mehrere Gradients | Auf einem Element gestapelt | background: g1, g2, g3; |
CSS-Gradient-Beispiele zum Ausprobieren
Radialer Spotlight
CSS
.card { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 40%), #1f2230;}Lege ein halbtransparentes radiales Highlight auf eine Volltonfarbe, um eine weiche Lichtquelle anzudeuten — top für Dark-Mode-Cards.
Streifen mit harten Kanten
CSS
.stripes { background: repeating-linear-gradient( 45deg, #1a1a1a 0 12px, #2a2a2a 12px 24px );}Zwei Stops an derselben Position erzeugen eine scharfe Kante. Eingepackt in repeating-linear-gradient wiederholt sich das Muster automatisch.
Typische Fehler bei CSS-Gradients
- Zu viele Color Stops verwenden — drei oder vier reichen meistens; mehr lässt das Ergebnis oft matschig wirken.
- Vergessen, dass
0degin CSS-Gradients von unten nach oben läuft (anders als in vielen Design-Tools, wo 0° nach rechts zeigt). - Text auf einen kontrastreichen Verlauf setzen, ohne die Lesbarkeit an beiden Enden zu prüfen — denk an WCAG-Kontrast.
FAQ zu CSS-Gradients
Wie erstelle ich einen CSS-Gradient?
Verwende
linear-gradient, radial-gradient oder conic-gradient als Wert einer background- oder background-image-Property. Jede Funktion erwartet eine Richtung (oder einen Mittelpunkt) und eine Liste von Color Stops.Worin unterscheiden sich linear, radial und conic?
Lineare Gradients ziehen Farben entlang einer geraden Linie. Radiale strahlen kreis- oder ellipsenförmig von einem Punkt aus. Konische schwenken die Farben wie ein Uhrzeiger um einen Mittelpunkt herum.
Kann ich einen CSS-Gradient animieren?
Browser interpolieren nicht weich zwischen Gradient-Bildern. Die gängigen Tricks:
background-position animieren für einen wandernden Verlauf, zwischen zwei Gradient-Layern per Opacity überblenden oder CSS Custom Properties animieren, die als Color Stops eingesetzt werden.Warum sieht mein Verlauf banded aus?
Banding entsteht, wenn zu wenige diskrete Farbstufen eine große Fläche überspannen müssen. Füge Zwischen-Stops hinzu, wechsle in einen perzeptiven Farbraum wie
oklch oder leg ein dezentes Dither-Rauschen drüber.Werden CSS-Gradients von allen Browsern unterstützt?
Lineare und radiale Gradients laufen überall. Conic Gradients werden in allen modernen Browsern unterstützt. Für sehr alte Browser legst du vor der Gradient-Deklaration eine solide
background-color als Fallback hinterher.