CSS Gradient Generator: Der moderne Weg, Hintergründe zu gestalten
Ist Ihnen 2026 etwas am Web aufgefallen?
Hero-Bereiche sind keine einfarbigen Flächen mehr.
Hintergründe sind keine einzelnen Hex-Codes mehr.
Buttons sind nicht mehr background: #7c3aed.
Sie sind Farbverläufe. Dezent. Geschichtet. Manchmal animiert. Und sie unterscheiden eine Stripe-würdige UI von einem 2015er Bootstrap-Klon.
In diesem Leitfaden zeige ich Ihnen den kostenlosen CSS Gradient Generator, den ich verwende, erkläre die 3 Arten von Farbverläufen (linear, radial, konisch) und teile die 5 Gradienten-Muster, die jede UI 10x hochwertiger aussehen lassen.
Warum Gradienten zurück sind#
Flat Design dominierte 2014-2020.
Dann begannen Stripe, Linear, Vercel und andere, wieder dezente Gradienten zu verwenden. Und die Nutzer reagierten: Gradienten wirken
- Premium (denken Sie an Luxusmarken)
- Energiegeladen (denken Sie an Spotify-ähnliche Hero-Seiten)
- Modern (denken Sie an jedes KI-Tool, das in den letzten 2 Jahren gestartet ist)
Ein gut gewählter Gradient erledigt 80% der visuellen Arbeit auf einer Landing Page.
Was ein großartiger CSS-Verlaufsgenerator leistet#
Meine Checkliste:
- Drei Verlaufstypen, linear, radial, konisch
- Live-Vorschau, sehen Sie den Verlauf während der Anpassung
- Mehrere Farbstopps, nicht nur 2-Farb-Verläufe, sondern 3, 4, 5+
- Voreinstellungen, starten Sie mit beliebten Verläufen, passen Sie sie an
- Animations-Keyframes, für animierte Verlaufshintergründe
- Mehrere Ausgabeformate, CSS, Tailwind-Arbiträrwerte, SCSS
Wenn ein Tool nur 2-Farb-Linearverläufe kann, lassen Sie es sein.
Der kostenlose Generator, den ich nutze#
Molixa CSS Gradient Generator.
Alle sechs Funktionen. Plus 10 Voreinstellungen und OKLCH-Unterstützung für Tailwind v4.
Kostenlos. Nur im Browser.
Die 3 Arten von CSS-Verläufen#
Jede hat ihren Platz.
1. Linearer Verlauf#
Ein Farbübergang von einem Punkt zum anderen in einer geraden Linie.
background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
Verwendung für: die meisten Hero-Bereiche, Buttons, Karten.
2. Radialer Verlauf#
Ein Farbübergang, der von einem Mittelpunkt nach außen strahlt.
background: radial-gradient(circle at center, #7c3aed 0%, #1e1b4b 100%);
Verwendung für: Spotlight-Effekte, leuchtende Buttons, Blob-Hintergründe.
3. Konischer Verlauf#
Ein Farbübergang, der um einen Mittelpunkt rotiert.
background: conic-gradient(from 0deg, red, yellow, green, blue, red);
Verwendung für: Tortendiagramm-ähnliche Visuals, rotierende Ladeanimationen, Farbkreise.
Linear ist das Arbeitstier. Radial ist dramatisch. Konisch ist selten, aber mächtig.
5 Gradient-Muster, die ich von Top-Seiten klauen#
Getestet, schön, copy-paste-fertig.
Muster 1: Der "AI-Startup-Held"#
Verwendet von: jedem YC AI-Startup, OpenAI, Anthropic.
background: linear-gradient(135deg, #7c3aed 0%, #ec4899 50%, #f59e0b 100%);
Lila → Pink → Bernstein. Kühn, energiegeladen, "wir werden die Welt verändern."
Muster 2: Das "Premium-SaaS"#
Verwendet von: Stripe, Linear, Vercel.
background: radial-gradient(ellipse at top, rgba(124, 58, 237, 0.15) 0%, transparent 60%);
Subtiler lila Schimmer oben, der in Transparenz übergeht. Sieht teuer aus, ohne zu schreien.
Muster 3: Der "Cyberpunk"#
Verwendet von: technikaffinen Marken, Gaming-Seiten.
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #581c87 100%);
Tiefe Lila- und Indigotöne. Geheimnisvoll, futuristisch.
Muster 4: Der "Sonnenaufgang"#
Verwendet von: Lifestyle-, Fitness-, Wellness-Marken.
background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #f97316 100%);
Gelb bis Orange. Warm, optimistisch, Morgenenergie.
Muster 5: Der "Ozean"#
Verwendet von: Reise-Websites, Sommermarken, Gastgewerbe.
background: linear-gradient(180deg, #06b6d4 0%, #0891b2 50%, #155e75 100%);
Cyan bis tiefes Teal. Ruhig, erfrischend, professionell.
Schritt für Schritt: Ihr erstes Gradient erstellen#
So funktioniert der Workflow.
Schritt 1: Öffnen Sie den Generator#
molixa.app/tools/css-gradient.
Schritt 2: Wählen Sie den Gradient-Typ#
Standardmäßig linear. Versuchen Sie radial, wenn Sie einen "Scheinwerfer"-Effekt wünschen.
Schritt 3: Farben auswählen#
Klicken Sie auf jeden Farbstopp, wählen Sie einen Hex-Wert. Oder nutzen Sie eine der 10 Voreinstellungen zum Start.
Schritt 4: Richtung anpassen#
Bei linear: Winkel (0° = oben nach unten, 90° = links nach rechts, 135° = diagonal).
Bei radial: Position (oben links, Mitte usw.).
Schritt 5: Bei Bedarf Farbstopps hinzufügen#
2-Farb-Gradienten sind in Ordnung. 3-Farb-Gradienten sind reichhaltiger. 5+ Farben können chaotisch wirken, sparsam verwenden.
Schritt 6: CSS kopieren#
Ein Klick. Fügen Sie es in Ihr Stylesheet ein.
Schritt 7: Im Kontext testen#
Ein isolierter Gradient sieht anders aus als ein Gradient hinter Inhalten. Testen Sie immer in Ihrer echten Benutzeroberfläche.
Echtes Beispiel: mein Landing-Page-Hero#
So sieht es auf meiner eigenen Seite aus.
background:
radial-gradient(ellipse at top, rgba(124, 58, 237, 0.2) 0%, transparent 70%),
linear-gradient(180deg, #0a0a0a 0%, #0a0a0a 100%);
Zwei Ebenen:
- Dezenter violetter radialer Glanz oben
- Durchgehend dunkler Hintergrund
Ergebnis: dunkler Hero mit einem Hauch Markenfarbe. Dezent, aber hochwertig.
Häufige Gradientenfehler#
Nach der Prüfung vieler Websites:
Fehler 1: Zu viel Kontrast. Ein Gradient von Weiß zu Schwarz wirkt hart. Verwenden Sie verwandte Farbtöne.
Fehler 2: Gradienten für Fließtext. Schwer lesbar. Verwenden Sie Gradienten nur für Hintergründe und große Anzeigeelemente.
Fehler 3: Zu viele Farbstopps. Ein 7-Farben-Regenbogen-Gradient sieht aus wie eine Pride-Flagge, nicht wie eine Marke. Bleiben Sie bei 2-3 Farben.
Fehler 4: Fallback-Farben vergessen. Ältere Browser unterstützen nicht alle Gradientenfunktionen. Legen Sie eine einfarbige Hintergrundfarbe als Fallback fest.
Fehler 5: Performance-Probleme bei animierten Gradienten. Das Animieren von Farbstopps löst bei jedem Frame ein Neuzeichnen aus. Verwenden Sie transform und opacity für Animationen, Gradienten als statische Ebenen.
Animierte Verläufe#
Möchtest du einen fließenden, animierten Farbverlauf im Hintergrund?
@keyframes shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.hero {
background: linear-gradient(45deg, #7c3aed, #ec4899, #f59e0b, #06b6d4);
background-size: 400% 400%;
animation: shift 15s ease infinite;
}
Dies verschiebt die Farbverlaufsstopps über 15 Sekunden und erzeugt einen fließenden Effekt.
Verwende es sparsam. Animierte Hintergründe können vom Inhalt ablenken.
Profi-Tipps#
Schnelle Erfolge:
Tipp 1: Verwenden Sie für den Dunkelmodus dunklere Varianten desselben Farbverlaufs. Nicht komplett neu einfärben.
Tipp 2: Überlagern Sie Farbverläufe mit halbtransparenten Stoppunkten für Tiefe. Mehrere Farbverläufe auf demselben Element erzeugen reichhaltige visuelle Effekte.
Tipp 3: Verwenden Sie für Buttons einen vertikalen linearen Farbverlauf (oben heller, unten dunkler). Dies imitiert natürliche Beleuchtung.
Tipp 4: Testen Sie Farbverläufe auf mehreren Monitoren. Günstige Displays geben Farben anders wieder; was auf einem Mac dezent wirkt, kann auf einem Budget-Monitor hart aussehen.
Tipp 5: Dokumentieren Sie Ihre Farbverläufe für die Markenkonsistenz in einem Styleguide. "Hero-Farbverlauf" = diese genauen Stoppunkte.
Was ist mit CSS-Mesh-Verläufen?#
Das neue Glanzstück.
Mesh-Verläufe sind komplexe Mehrfarbenverläufe, wie sie auf den Marketingseiten von Stripe beliebt sind.
Die reine CSS-Unterstützung ist begrenzt, die meisten "Mesh-Verlauf"-Effekte werden mit mehreren überlappenden radialen Verläufen erzielt.
Tools wie meshgradient.com (kostenlos) handhaben das gut.
Tools jenseits des Generators#
Ein paar nützliche Verwandte:
- uigradients.com, Community-geteilte Gradientenbibliothek
- gradient.style, reiner CSS-Gradient-Builder
- gradienta.io, animierte CSS-Gradienten
- Molixa CSS Gradient, kostenlos, alles in einem
Zusammenfassung#
Farbverläufe sind der einfachste Weg, einer Benutzeroberfläche visuelle Eleganz zu verleihen.
Fünf Minuten Arbeit mit Verläufen lassen ein Design von 2024 wie 2026 aussehen.
Molixa CSS Gradient Generator bietet alle Funktionen, die Sie brauchen. Kostenlos.
Wählen Sie ein Muster. Passen Sie die Farben an. Kopieren. Einfügen.
Sehen Sie zu, wie Ihre UI auf das nächste Level gehoben wird.
