30 Verlaufshintergrund-Beispiele (inkl. CSS-Code) 2026

# Verlaufshintergründe: 30 kostenlose CSS-Beispiele (mit HEX-Codes)

Verlaufshintergründe mischen zwei oder mehr Farben sanft über ein Element. In CSS baust du sie mit linear-gradient(), radial-gradient() oder conic-gradient() — keine Bilder, keine zusätzlichen HTTP-Anfragen, unendliche Auflösung. 2026 tauchen sie an drei Hauptorten auf: dezente SaaS-Heros, knallige Marketing-Akzente und abstrakte Mesh-Kunst. Unten findest du 30 Copy-Paste-Beispiele in sechs Kategorien gruppiert, jedes mit vollständigem CSS, HEX-Codes und einem empfohlenen Anwendungsfall (Hero, Button oder Card). Willst du eines davon remixen? Bau dir dein eigenes in unserem kostenlosen Verlaufsgenerator.

CSS-Verlaufssyntax (60-Sekunden-Einführung)

Drei Funktionen decken fast jeden Verlauf ab, den du je brauchen wirst.

Linear — Farben fließen entlang einer geraden Linie:

background: linear-gradient(135deg, #6366f1, #ec4899);

Radial — Farben strahlen von einem Mittelpunkt aus:

background: radial-gradient(circle at 30% 20%, #fde68a, #f43f5e);

Konisch — Farben fegen wie ein Uhrzeiger um einen Mittelpunkt:

background: conic-gradient(from 0deg at 50% 50%, #06b6d4, #6366f1, #ec4899, #06b6d4);

Füge so viele Farbstopps hinzu, wie du willst, und pinne jeden auf einen Prozentwert (#6366f1 0%, #ec4899 60%, #f43f5e 100%) für präzise Kontrolle.

Dezente / SaaS-Hero-Hintergründe

Fünf ruhige Verläufe, die hinter Produkt-Screenshots sitzen, ohne Aufmerksamkeit zu stehlen. Pastell, einfarbig, kontrastarm.

1. Lavender mist — #ede9fe → #c4b5fd

background: linear-gradient(180deg, #ede9fe 0%, #c4b5fd 100%);

2. Mint whisper — #ecfdf5 → #a7f3d0

background: linear-gradient(160deg, #ecfdf5 0%, #a7f3d0 100%);

3. Cream peach — #fff7ed → #fed7aa

background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);

4. Sky fade — #eff6ff → #bfdbfe

background: linear-gradient(180deg, #eff6ff 0%, #bfdbfe 100%);

5. Slate hush — #f8fafc → #cbd5e1

background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 100%);

Nutze diese hinter dunklem Text oder Produkt-Mockups. Sie halten den Kontrast hoch und konkurrieren nie mit der Vordergrund-UI. Der lineare 180-Grad-Fluss gibt ein sanftes "Himmel-fadet-zu-Boden"-Gefühl, das ruhig und modern wirkt.

Knallig / Marketing-Akzent

Fünf gesättigte Verläufe für CTAs, Pricing-Cards und energiegeladene Heros.

6. Electric punch — #8b5cf6 → #06b6d4

background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);

7. Hot magenta — #ec4899 → #f97316

background: linear-gradient(120deg, #ec4899 0%, #f97316 100%);

8. Neon lime — #22c55e → #06b6d4

background: linear-gradient(135deg, #22c55e 0%, #06b6d4 100%);

9. Royal gold — #7c3aed → #f59e0b

background: linear-gradient(135deg, #7c3aed 0%, #f59e0b 100%);

10. Cherry pop — #ef4444 → #a855f7

background: linear-gradient(135deg, #ef4444 0%, #a855f7 100%);

Diese funktionieren super auf Buttons. Setze color: white und einen leichten box-shadow und du hast einen CTA, der konvertiert. Paar sie mit einer dunkleren Variante auf :hover für diese befriedigende Klick-Affordanz.

Sonnenuntergang / atmosphärisch

Fünf warme, kinoreife Verläufe inspiriert von Himmeln in der goldenen Stunde.

11. Beach dusk — #fb923c → #db2777 → #6d28d9

background: linear-gradient(135deg, #fb923c 0%, #db2777 50%, #6d28d9 100%);

12. Peach blossom — #fda4af → #fdba74

background: linear-gradient(180deg, #fda4af 0%, #fdba74 100%);

13. Coral flame — #fbbf24 → #f43f5e

background: linear-gradient(135deg, #fbbf24 0%, #f43f5e 100%);

14. Plum horizon — #dc2626 → #4c1d95

background: linear-gradient(160deg, #dc2626 0%, #4c1d95 100%);

15. Amber violet — #f59e0b → #7c3aed

background: linear-gradient(135deg, #f59e0b 0%, #7c3aed 100%);

Sonnenuntergangs-Verläufe funktionieren besonders gut hinter Hero-Text auf Creator-Portfolios, Podcast-Cover-Art und Event-Landingpages.

Cool / Tech

Fünf Blau-Lila-Kombinationen, die selbstbewusst und modern wirken. Perfekt für Dev-Tools, Fintech und Infrastruktur-Marken.

16. Cyan deep — #22d3ee → #1e3a8a

background: linear-gradient(135deg, #22d3ee 0%, #1e3a8a 100%);

17. Indigo violet — #4f46e5 → #a855f7

background: linear-gradient(135deg, #4f46e5 0%, #a855f7 100%);

18. Teal navy — #14b8a6 → #1e293b

background: linear-gradient(160deg, #14b8a6 0%, #1e293b 100%);

19. Glacier — #dbeafe → #6366f1

background: linear-gradient(180deg, #dbeafe 0%, #6366f1 100%);

20. Aurora tech — #06b6d4 → #6366f1 → #c026d3

background: linear-gradient(135deg, #06b6d4 0%, #6366f1 50%, #c026d3 100%);

Mesh / Multi-Stop

Fünf Verläufe, die durch Stapeln mehrerer radial-gradient()-Aufrufe gebaut sind. Sie sehen gemalt aus, nicht algorithmisch — der moderne Hero-Look hinter Marken wie Stripe und Linear.

21. Soft mesh — Pink, Pfirsich, Flieder

background:
  radial-gradient(at 20% 20%, #fbcfe8 0px, transparent 50%),
  radial-gradient(at 80% 0%, #fde68a 0px, transparent 50%),
  radial-gradient(at 0% 80%, #c4b5fd 0px, transparent 50%),
  #fff7ed;

22. Aurora mesh — Cyan, Indigo, Magenta

background:
  radial-gradient(at 10% 10%, #06b6d4 0px, transparent 50%),
  radial-gradient(at 90% 30%, #6366f1 0px, transparent 50%),
  radial-gradient(at 50% 90%, #ec4899 0px, transparent 50%),
  #0f172a;

23. Citrus mesh — Gelb, Koralle, Mint

background:
  radial-gradient(at 0% 0%, #fde047 0px, transparent 50%),
  radial-gradient(at 100% 50%, #fb7185 0px, transparent 50%),
  radial-gradient(at 50% 100%, #34d399 0px, transparent 50%),
  #ffffff;

24. Cosmic mesh — Violett, Blau, Magenta auf Dunkel

background:
  radial-gradient(at 15% 30%, #7c3aed 0px, transparent 60%),
  radial-gradient(at 85% 70%, #2563eb 0px, transparent 60%),
  radial-gradient(at 50% 50%, #db2777 0px, transparent 50%),
  #020617;

25. Pastel mesh — Himmelblau, Mint, Pink

background:
  radial-gradient(at 25% 25%, #bae6fd 0px, transparent 50%),
  radial-gradient(at 75% 25%, #bbf7d0 0px, transparent 50%),
  radial-gradient(at 50% 80%, #fbcfe8 0px, transparent 50%),
  #fafafa;

Gesponsert von den Machern

Genug von langweiligen Screenshots? Probier ScreenSnap Pro.

Wunderschöne Hintergründe, professionelle Annotationen, GIF-Aufnahme und sofortiges Cloud-Sharing — alles in einer App. Einmalig 29 $, für immer deins.

Sieh, was es kann

Animierte Verläufe

Fünf Verläufe, die sich bewegen. Sparsam einsetzen — Bewegung zieht Aufmerksamkeit, verbrennt sie aber schnell.

26. Slow shift — geloopter linearer Sweep

.bg {
  background: linear-gradient(135deg, #6366f1, #ec4899, #f59e0b, #6366f1);
  background-size: 300% 300%;
  animation: shift 12s ease infinite;
}
@keyframes shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

27. Conic spin — rotierender Regenbogen

.bg {
  background: conic-gradient(from 0deg, #06b6d4, #8b5cf6, #ec4899, #06b6d4);
  animation: spin 20s linear infinite;
}
@keyframes spin {
  to { transform: rotate(1turn); }
}

28. Hover swap — interaktiver Button

.btn {
  background: linear-gradient(135deg, #6366f1, #ec4899);
  background-size: 200% 200%;
  transition: background-position 0.6s ease;
}
.btn:hover { background-position: 100% 0%; }

29. Aurora drift — langsamer Mesh

.bg {
  background:
    radial-gradient(at 20% 20%, #06b6d4, transparent 50%),
    radial-gradient(at 80% 60%, #ec4899, transparent 50%),
    #0f172a;
  background-size: 200% 200%;
  animation: drift 18s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 100%; }
}

30. Pulse glow — radialer Atemeffekt

.bg {
  background: radial-gradient(circle at 50% 50%, #f472b6, #1e1b4b);
  animation: pulse 6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { background-size: 100% 100%; }
  50%      { background-size: 140% 140%; }
}

Paar animierte Verläufe mit prefers-reduced-motion: reduce, um Bewegung für Nutzer zu deaktivieren, die das brauchen. Ein einfacher Wrapper:

@media (prefers-reduced-motion: reduce) {
  .bg { animation: none; }
}

Diese eine Regel hält dein Design barrierefrei, ohne den statischen Look für alle anderen zu verlieren.

Browser-Support 2026

linear-gradient(), radial-gradient() und conic-gradient() laufen alle in jedem Evergreen-Browser — Chrome, Edge, Safari, Firefox plus iOS und Android. Die caniuse-Daten zu CSS gradients zeigen den globalen Support über 99 %. Das Einzige, was noch im Fluss ist, ist die vorgeschlagene mesh-gradient()-Funktion aus CSS Images Module Level 4, die noch nirgends ausgeliefert wird. Bis sie landet, fakest du Mesh-Verläufe mit gestapelten radialen Verläufen (Beispiele 21-25 oben).

Für tiefe Syntax-Details und Sonderfälle sind die MDN-Verlaufsreferenz und der MDN-Leitfaden zur Nutzung von Verläufen die kanonischen Quellen.

Best Practices für Verlaufshintergründe

Dateigröße schlägt PNGs. Ein 1920x1080-Hero als PNG kann 500 KB erreichen. Ein CSS-Verlauf sind Bytes — der Browser malt ihn. Wähl immer CSS statt eines Bildes für solide Farbübergänge.

Teste den Kontrast an jedem Punkt. Ein Verlauf, der von #6366f1 zu #fde68a fadet, kann WCAG gegen weißen Text am dunklen Ende bestehen und am hellen Ende durchfallen. Sample mehrere Punkte entlang des Pfads. Unser Farbkontrast-Checker verifiziert WCAG AA und AAA mit einem Klick.

Performance. CSS-Verläufe sind GPU-beschleunigt und reflowen günstig. Gestapelte Mesh-Verläufe mit 6+ Schichten können die Paint-Performance auf älteren Mobilgeräten verletzen — halte es unter vier Schichten, wenn du ältere Geräte ansteuerst.

Sperr Text nicht in unruhige Mesh-Verläufe. Füge ein abgedunkeltes Overlay hinzu (background: rgba(0,0,0,0.4) auf einem Kindelement), damit Überschriften lesbar bleiben.

Eigene Verläufe generieren

30 Beispiele zu durchstöbern macht Spaß, aber irgendwann willst du exakte Farben, die zu deiner Marke passen. Spar dir das Trial-and-Error und nutze unseren kostenlosen Verlaufsgenerator — Farben wählen, Stopps ziehen, zwischen linear/radial/konisch wechseln, CSS kopieren, fertig. Er exportiert den Verlauf außerdem als PNG für Slidedecks und Social-Posts.

Wenn du außerdem verlaufsfreundliche Farbpaletten aus einem Referenzbild extrahieren musst, jag es zuerst durch unseren Color Palette Extractor — füge die HEX-Codes direkt in den Generator ein.

Ein kurzes Wort zur Farbtheorie

Warum knallen manche Verläufe, während andere matschig wirken? Zwei Faustregeln. Komplementärfarben (Gegenüber auf dem Farbkreis — Orange und Blau, Rot und Grün) erzeugen hohen Kontrast und visuelle Energie; super für CTAs und knallige Heros. Analoge Farben (Nachbarn auf dem Farbkreis — Blau, Blauviolett, Violett) wirken ruhig und stimmig; super für dezente SaaS-Hintergründe. Die meisten knalligen Verläufe oben nutzen komplementäre Paare; die meisten dezenten lehnen sich an analoge an. Wenn sich ein Verlauf "schief" anfühlt, prüfe, ob die beiden Endpunkte zu nah am Grau auf dem Farbkreis sitzen — das ist meist der Übeltäter. Für eine tiefere Einführung in Farbton, Sättigung und Harmonie geht unser Leitfaden zur Farbtheorie den ganzen Farbkreis durch.

Für Mac-Nutzer, die Verlaufsfarben direkt aus jeder App oder Webseite greifen wollen, schau dir unseren Leitfaden zum Farben vom Bildschirm picken auf dem Mac an.

Häufig gestellte Fragen

Was ist ein CSS-Verlauf?

Ein CSS-Verlauf ist ein sanfter Übergang zwischen zwei oder mehr Farben, vom Browser über die Funktion linear-gradient(), radial-gradient() oder conic-gradient() erzeugt. Er wird wie ein Bild gerendert, wird aber als ein paar Bytes Code ausgeliefert, sodass er sich unendlich skalieren lässt, ohne Qualität zu verlieren.

Linear vs. radial vs. konisch — wann nutze ich was?

Lineare Verläufe fließen in einer geraden Linie und passen für Hero-Sektionen, Buttons und große Hintergrundfüllungen. Radiale Verläufe strahlen von einem Punkt aus und funktionieren gut für Spotlight-Effekte, Cards und Faux-Mesh-Kunst. Konische Verläufe fegen um einen Mittelpunkt und glänzen bei Tortendiagrammen, Farbkreisen und dekorativen Loadern.

Sind CSS-Verläufe besser als Bildhintergründe?

Ja, in fast jedem Fall. CSS-Verläufe sind winzig (oft unter 100 Bytes), skalieren auf jede Auflösung, und der Browser malt sie auf der GPU. PNG- oder JPG-Hintergründe bringen Netzwerk-Anfragen, Dateigewicht und Auflösungsärger auf Retina-Bildschirmen. Nutze ein Bild nur, wenn du fotografisches Detail brauchst.

Wie animiere ich einen Verlauf?

Der Trick: setze background-size größer als das Element (z. B. 300% 300%), dann animiere background-position mit @keyframes. Beispiel 26 oben zeigt das Muster. Für Rotationseffekte nutze conic-gradient() und animiere transform: rotate() (Beispiel 27).

Was ist ein Mesh-Verlauf?

Ein Mesh-Verlauf vermischt mehrere Farbpunkte über eine 2D-Fläche, wie eine Aquarell-Wäsche. Echte Mesh-Verläufe kommen mit CSS Images Module Level 4, sind aber noch nicht ausgeliefert. Heute fakest du den Look, indem du 3-5 radial-gradient()-Aufrufe mit verschiedenen Positionen und transparent-Fades stapelst — siehe Beispiele 21-25.

Schaden Verläufe meinen Core Web Vitals?

Fast nie. CSS-Verläufe rendern auf der GPU und lösen keine Netzwerk-Anfragen aus. Der einzige Aufpasser sind animierte Verläufe auf älteren Mobilgeräten — background-position auf riesigen Mesh-Verläufen zu animieren kann Paint-Frames kosten. Wenn du Ruckler siehst, reduziere die Anzahl der gestapelten Schichten oder pausiere die Animation hinter einer prefers-reduced-motion-Abfrage.

Wo finde ich mehr Verlaufs-Inspiration?

Zwei Anlaufstellen: cssgradient.io für einen visuellen Editor mit Copy-Paste-CSS und uigradients.com für eine kuratierte Sammlung. Wenn du eine Stimmung findest, die dir gefällt, baue sie in unserem Verlaufsgenerator nach, sodass du die exakten HEX-Werte besitzt.

Wenn du Produkt-Screenshots baust, die auf diesen Verläufen sitzen, kommt ScreenSnap Pro mit über 150 fertigen Verlaufshintergründen für Ein-Klick-Verschönerung — praktisch, wenn du nicht CSS verdrahten willst, nur um einen Marketing-Screenshot aufzuhübschen. Einmalig 29 $, Mac und Windows.