Verlaufs-Hintergrundbibliothek
Durchsuchen Sie über 110 ausgewählte CSS-Verlaufs-Hintergründe, nach Stil geordnet: Sonnenuntergang, Ozean, Wald, Feuer, Violett, Pastell, Dunkel, Neon, Minimalistisch, Warm und Kühl. Klicken Sie auf einen Verlauf, um den gebrauchsfertigen CSS-Hintergrundwert sofort zu kopieren. Kostenlos, keine Registrierung nötig.
Showing 110 of 110 gradients
Golden Hour
linear-gradient(135deg, #f6d365 0%, #fda08…
Sunset Blaze
linear-gradient(135deg, #f83600 0%, #f9d42…
Dusk
linear-gradient(135deg, #fc4a1a 0%, #f7b73…
Amber Glow
linear-gradient(135deg, #f7971e 0%, #ffd20…
Horizon
linear-gradient(135deg, #ff6e7f 0%, #bfe9f…
Twilight
linear-gradient(135deg, #ee0979 0%, #ff6a0…
Peach Fuzz
linear-gradient(135deg, #ffb347 0%, #ffcc3…
Coral Reef
linear-gradient(135deg, #ff9a9e 0%, #fad0c…
Deep Sea
linear-gradient(135deg, #0f2027 0%, #203a4…
Aqua Splash
linear-gradient(135deg, #13547a 0%, #80d0c…
Tidal Wave
linear-gradient(135deg, #1a6dff 0%, #00d2f…
Lagoon
linear-gradient(135deg, #43c6ac 0%, #19165…
Seafoam
linear-gradient(135deg, #a8edea 0%, #fed6e…
Pacific
linear-gradient(135deg, #005c97 0%, #36379…
Maldives
linear-gradient(135deg, #00b4db 0%, #0083b…
Bali Blue
linear-gradient(135deg, #56ccf2 0%, #2f80e…
Emerald
linear-gradient(135deg, #11998e 0%, #38ef7…
Jungle
linear-gradient(135deg, #134e5e 0%, #71b28…
Moss
linear-gradient(135deg, #56ab2f 0%, #a8e06…
Rainforest
linear-gradient(135deg, #1d976c 0%, #93f9b…
Sage
linear-gradient(135deg, #b2d8b2 0%, #e8f5e…
Pine
linear-gradient(135deg, #2d6a4f 0%, #52b78…
Fern
linear-gradient(135deg, #74b49b 0%, #a7c5b…
Canopy
linear-gradient(135deg, #093028 0%, #237a5…
Inferno
linear-gradient(135deg, #f12711 0%, #f5af1…
Lava
linear-gradient(135deg, #200122 0%, #6f000…
Ember
linear-gradient(135deg, #eb5757 0%, #00000…
Phoenix
linear-gradient(135deg, #f7971e 0%, #e52d2…
Volcano
linear-gradient(135deg, #870000 0%, #190a0…
Wildfire
linear-gradient(135deg, #ff416c 0%, #ff4b2…
Torch
linear-gradient(135deg, #f46b45 0%, #eea84…
Magma
linear-gradient(135deg, #c94b4b 0%, #4b134…
Amethyst
linear-gradient(135deg, #9d50bb 0%, #6e48a…
Cosmic
linear-gradient(135deg, #20002c 0%, #cbb4d…
Lavender
linear-gradient(135deg, #e0c3fc 0%, #8ec5f…
Nebula
linear-gradient(135deg, #a18cd1 0%, #fbc2e…
Ultraviolet
linear-gradient(135deg, #4776e6 0%, #8e54e…
Plum
linear-gradient(135deg, #4b0082 0%, #9400d…
Orchid
linear-gradient(135deg, #da22ff 0%, #9733e…
Violet Haze
linear-gradient(135deg, #c471f5 0%, #fa71c…
Cotton Candy
linear-gradient(135deg, #ffecd2 0%, #fcb69…
Baby Blue
linear-gradient(135deg, #a1c4fd 0%, #c2e9f…
Blush
linear-gradient(135deg, #fbc2eb 0%, #a6c1e…
Mint Cream
linear-gradient(135deg, #d4fc79 0%, #96e6a…
Peach Sorbet
linear-gradient(135deg, #ffeaa7 0%, #fab1a…
Lilac
linear-gradient(135deg, #e0c3fc 0%, #d4a5f…
Powder Pink
linear-gradient(135deg, #ffd1dc 0%, #ffb3c…
Sky Mist
linear-gradient(135deg, #e0f7fa 0%, #b2ebf…
Midnight
linear-gradient(135deg, #0f0c29 0%, #302b6…
Obsidian
linear-gradient(135deg, #1a1a2e 0%, #16213…
Charcoal
linear-gradient(135deg, #232526 0%, #41434…
Void
linear-gradient(135deg, #000000 0%, #43434…
Abyss
linear-gradient(135deg, #000000 0%, #0f202…
Shadow
linear-gradient(135deg, #2c3e50 0%, #4ca1a…
Onyx
linear-gradient(135deg, #1a1a1a 0%, #2d2d2…
Eclipse
linear-gradient(135deg, #0d0d0d 0%, #1a053…
Neon Pulse
linear-gradient(135deg, #00f260 0%, #0575e…
Electric
linear-gradient(135deg, #00c6ff 0%, #0072f…
Cyber
linear-gradient(135deg, #f953c6 0%, #b91d7…
Acid
linear-gradient(135deg, #b3ff00 0%, #00ff8…
Plasma
linear-gradient(135deg, #ff00cc 0%, #33339…
Laser
linear-gradient(135deg, #ff0099 0%, #49324…
Glitch
linear-gradient(135deg, #00ffff 0%, #ff00f…
Synthwave
linear-gradient(135deg, #fc00ff 0%, #00dbd…
Snow
linear-gradient(135deg, #e0e0e0 0%, #fffff…
Fog
linear-gradient(135deg, #d7d2cc 0%, #30435…
Ash
linear-gradient(135deg, #b8c6db 0%, #f5f7f…
Parchment
linear-gradient(135deg, #f5f0e8 0%, #e8dcc…
Linen
linear-gradient(135deg, #f5f5f0 0%, #e8e8e…
Slate
linear-gradient(135deg, #f8f9fa 0%, #e9ece…
Mist
linear-gradient(135deg, #f0f4f8 0%, #d9e2e…
Pearl
linear-gradient(135deg, #fdfbfb 0%, #ebede…
Honey
linear-gradient(135deg, #f6d365 0%, #fda08…
Caramel
linear-gradient(135deg, #d4a574 0%, #f4e4c…
Terracotta
linear-gradient(135deg, #c0392b 0%, #e67e2…
Autumn
linear-gradient(135deg, #d35400 0%, #f39c1…
Cinnamon
linear-gradient(135deg, #8b4513 0%, #d2691…
Saffron
linear-gradient(135deg, #f7971e 0%, #ffd20…
Maple
linear-gradient(135deg, #c94b4b 0%, #e67e2…
Butterscotch
linear-gradient(135deg, #f9d423 0%, #ff4e5…
Arctic
linear-gradient(135deg, #e8f4f8 0%, #a8d8e…
Glacier
linear-gradient(135deg, #b2d8d8 0%, #66a6f…
Steel
linear-gradient(135deg, #4b6cb7 0%, #18284…
Sapphire
linear-gradient(135deg, #1e3c72 0%, #2a69a…
Frost
linear-gradient(135deg, #cfd9df 0%, #e2ebf…
Cerulean
linear-gradient(135deg, #2980b9 0%, #6dd5f…
Cobalt
linear-gradient(135deg, #0052d4 0%, #4364f…
Teal Dream
linear-gradient(135deg, #00b09b 0%, #96c93…
Aurora
linear-gradient(135deg, #00c9ff 0%, #92fe9…
Rainbow
linear-gradient(135deg, #ff0000 0%, #ff770…
Prism
linear-gradient(135deg, #f093fb 0%, #f5576…
Candy
linear-gradient(135deg, #f6d365 0%, #fda08…
Sunrise
linear-gradient(135deg, #f8b500 0%, #ff6b6…
Galaxy
linear-gradient(135deg, #0d0d0d 0%, #1a053…
Opal
linear-gradient(135deg, #a8edea 0%, #fed6e…
Holographic
linear-gradient(135deg, #f093fb 0%, #f5576…
Denim
linear-gradient(135deg, #1e3c72 0%, #2a69a…
Rosewood
linear-gradient(135deg, #ad5389 0%, #3c105…
Citrus
linear-gradient(135deg, #f7971e 0%, #ffd20…
Watermelon
linear-gradient(135deg, #ff6b6b 0%, #feca5…
Bubblegum
linear-gradient(135deg, #ff9a9e 0%, #fecfe…
Moonrise
linear-gradient(135deg, #3a1c71 0%, #d76d7…
Tropics
linear-gradient(135deg, #1fa2ff 0%, #12d8f…
Velvet
linear-gradient(135deg, #4a0072 0%, #7b1fa…
Champagne
linear-gradient(135deg, #f7e7ce 0%, #d4a96…
Midnight Blue
linear-gradient(135deg, #2c3e50 0%, #3498d…
Tangerine
linear-gradient(135deg, #f7971e 0%, #ff6b6…
Spearmint
linear-gradient(135deg, #1d976c 0%, #93f9b…
Dusty Rose
linear-gradient(135deg, #d4a5a5 0%, #f7d6d…
Indigo Night
linear-gradient(135deg, #1a1a2e 0%, #16213…
Warum unsere Verlaufs-Hintergrundbibliothek nutzen?
- Sofortiges Kopieren mit einem Klick: Klicken Sie auf „CSS kopieren“ auf einer beliebigen Verlaufskarte und die gebrauchsfertige CSS-background-Eigenschaft landet sofort in Ihrer Zwischenablage – direkt einfügen in Stylesheet, Tailwind-Konfiguration oder Designwerkzeug.
- Nach Stil filtern und suchen: Durchsuchen Sie über 110 Verläufe nach Kategorie (Sonnenuntergang, Ozean, Wald, Feuer, Violett, Pastell, Dunkel, Neon, Minimalistisch, Warm und Kühl) oder suchen Sie nach Name, Farbe oder Stil-Stichwort, um sofort den passenden Verlaufs-Hintergrund zu finden.
- Produktionsreife CSS-Ausgabe: Jeder Verlaufs-Hintergrund der Bibliothek ist ein gültiger CSS-Wert mit Standard-linear-gradient()-Syntax. Kopieren und einfügen direkt in jede CSS-Datei, CSS-in-JS, Tailwind oder Inline-Styles – ohne Änderungen.
- 100 % kostenlos – keine Registrierung nötig: Die Verlaufs-Hintergrundbibliothek ist völlig kostenlos – ohne Konto, ohne Registrierung und ohne Nutzungslimits. Alle Verläufe sind für private und kommerzielle Nutzung frei. Durchsuchen, kopieren, einsetzen – ohne Bedingungen.
Typische Anwendungsfälle der Verlaufs-Hintergrundbibliothek
- Hintergründe für Hero- und Landingpages: Wenden Sie einen Verlaufs-Hintergrund in Sekunden auf Ihre Hero-Sektion, Ihr CTA-Banner oder das vollständige Seitenlayout an. Die Bibliothek liefert produktionsreifes CSS, das Sie direkt in Ihr Stylesheet übernehmen können.
- UI-Karten und Abschnittstrenner: Nutzen Sie Verlaufs-Hintergründe, um Abschnitte visuell zu trennen, Feature-Karten hervorzuheben oder Preistabellen Tiefe zu geben. Durchsuchen Sie die Bibliothek nach Stil – Minimalistisch für dezente Trenner, Neon für kräftige Akzente.
- Mockups in Figma und Designwerkzeugen: Kopieren Sie einen beliebigen Verlaufs-CSS-Wert und fügen Sie ihn direkt in Figma, Sketch oder Adobe XD als Füllung ein. Die Bibliothek erspart es Ihnen, Verläufe jedes Mal manuell nachzubauen.
- Grafiken für Social Media und Marketing: Erstellen Sie auffällige Hintergründe für Social-Media-Posts, YouTube-Thumbnails und E-Mail-Kopfzeilen mit Verläufen aus der Bibliothek. Die Kategorien Sonnenuntergang, Neon und Ozean sind für Marketingvisuals besonders beliebt.
- Splashscreens für mobile Apps und PWAs: Nutzen Sie Verlaufs-Hintergründe aus der Bibliothek für Splashscreens, Onboarding-Slides und Ladezustände. Die Kategorien Dunkel und Minimalistisch eignen sich besonders für moderne mobile UI-Muster.
- Präsentationen und Slide-Decks: Wenden Sie Verlaufs-Hintergründe auf Präsentationsfolien in Google Slides, PowerPoint oder Keynote an. Die Bibliothek deckt jede Stimmung ab – von professionellen minimalistischen Verläufen bis zu lebendigen Neon- und Sonnenuntergangsstilen.
Was ist ein CSS-Verlaufs-Hintergrund?
Ein CSS-Verlaufs-Hintergrund ist ein weicher Übergang zwischen zwei oder mehr Farben, der vollständig vom Browser gerendert wird – ohne Bilddatei. Die Verlaufs-Hintergrundbibliothek verwendet die Standard-CSS-Funktion linear-gradient(), die in jedem modernen Browser unterstützt wird. Da Verläufe von CSS erzeugt werden, sind sie unendlich skalierbar, laden sofort und verursachen null Bytes in Ihrem Bildgewicht – ideal für performancebewusstes Webdesign.
So verwenden Sie die Verlaufs-Hintergrundbibliothek
- Durchsuchen oder suchen: Nutzen Sie die Kategoriefilter-Schaltflächen (Sonnenuntergang, Ozean, Neon usw.) oder die Suchleiste, um einen passenden Verlaufs-Hintergrund zu finden.
- CSS kopieren: Klicken Sie auf „CSS kopieren“ auf einer beliebigen Verlaufskarte. Die vollständige Deklaration background: linear-gradient(…); wird sofort in die Zwischenablage kopiert.
- Einfügen und einsetzen: Fügen Sie den Verlaufs-CSS direkt in Ihr Stylesheet, die style-Prop von Tailwind, CSS-in-JS oder Ihr Designwerkzeug ein. Keine Änderung nötig – es funktioniert sofort.
Wie die CSS-Ausgabe aussieht
- Richtung: Alle Verläufe verwenden standardmäßig 135deg (diagonal von oben links nach unten rechts) – ein universell ansprechender Winkel. Den Winkel können Sie nach dem Kopieren im eigenen CSS ändern.
- Farbstopps: Die meisten Verläufe verwenden 2–3 als HEX definierte Farbstopps. Multi-Stopp-Verläufe (wie Rainbow und Holographic) nutzen bis zu 7 Stopps für reichere Übergänge.
- Syntax: Die Ausgabe verwendet Standard-linear-gradient() – kompatibel mit allen modernen Browsern und CSS-Präprozessoren (Sass, Less, PostCSS).
- Anpassung: Nach dem Kopieren können Sie den Winkel anpassen, weitere Farbstopps hinzufügen oder mit background-size und background-position zu animierten Verlaufseffekten kombinieren.
Die Kategorien der Verlaufs-Hintergrundbibliothek erklärt
Die Verlaufs-Hintergrundbibliothek ist in 11 Stilkategorien gegliedert, damit Sie die passende Stimmung schnell finden. Sonnenuntergang- und warme Verläufe nutzen Orange, Gelb und Rosa – ideal für energiegeladene, einladende Designs. Ozean- und kühle Verläufe nutzen Blau- und Türkistöne – großartig für professionelle und technikorientierte UIs. Dunkle Verläufe eignen sich für Dark-Mode-Oberflächen und dramatische Hero-Sektionen. Neon-Verläufe sind kontrastreich und lebendig – perfekt für Gaming, Unterhaltung und kühnes Marketing. Minimalistische Verläufe sind dezent und neutral – ideal für Hintergründe, die nicht mit dem Inhalt konkurrieren sollen.
Häufig gestellte Fragen
Eine Verlaufs-Hintergrundbibliothek ist eine kuratierte Sammlung von CSS-Verlaufs-Hintergründen, die Sie durchsuchen und mit einem Klick kopieren können. Diese Bibliothek enthält über 110 handverlesene linear-gradient()-Werte, nach Stil geordnet (Sonnenuntergang, Ozean, Wald, Feuer, Violett, Pastell, Dunkel, Neon, Minimalistisch, Warm und Kühl) – alle bereit zum direkten Einfügen in Ihr CSS.
Klicken Sie auf die Schaltfläche „CSS kopieren“ einer Verlaufskarte. Die vollständige CSS-Hintergrunddeklaration wird in die Zwischenablage kopiert. Fügen Sie sie in Ihr Stylesheet, die style-Prop von Tailwind, CSS-in-JS oder Ihr Designwerkzeug ein. Es sind keine Änderungen nötig.
Ja. Alle Verläufe der Bibliothek verwenden die Standard-CSS-Syntax linear-gradient() mit Farbwerten. Sie können jeden Verlauf frei in privaten und kommerziellen Projekten nutzen, ohne Namensnennung.
Natürlich. Alle Verläufe verwenden standardmäßig 135deg (diagonal). Um die Richtung zu ändern, ersetzen Sie 135deg durch einen beliebigen Winkel – 0deg für oben nach unten, 90deg für links nach rechts oder einen anderen. Der restliche Verlaufs-CSS bleibt gleich.
CSS linear-gradient() lässt sich nicht direkt animieren. Die gängigste Technik ist background-size: 200% 200% und das Animieren von background-position mit einer CSS-@keyframes-Regel. Der Verlaufs-CSS aus dieser Bibliothek dient als Ausgangspunkt für jede Animationstechnik.
Ja. Verwenden Sie den kopierten CSS als Inline-style-Prop oder fügen Sie ihn in Ihrer tailwind.config.js unter theme.extend.backgroundImage hinzu. Tailwind v3+ unterstützt auch beliebige Werte: bg-[linear-gradient(135deg,_#f6d365,_#fda085)].
Vollständig. Die Verlaufs-Hintergrundbibliothek ist ein statisches Nachschlagewerkzeug – keine Eingaben, kein Dateiupload, keine Datenverarbeitung. Alles läuft lokal in Ihrem Browser. Es werden nie Daten an einen Server gesendet.
Kopieren Sie einen beliebigen Verlauf aus der Bibliothek und wenden Sie ihn auf Ihr Element an: .mein-element { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); }. Für einen ganzseitigen Hintergrund wenden Sie ihn auf das body- oder html-Element an.
Ja. CSS unterstützt mehrere Hintergrundebenen, getrennt durch Kommas. Verwenden Sie rgba()-Farben mit Transparenz im ersten Verlauf, um ihn über den zweiten zu legen: background: linear-gradient(135deg, rgba(246,211,101,0.8), rgba(253,160,133,0.8)), linear-gradient(45deg, #667eea, #764ba2);