CSS-Farbverläufe fühlten sich früher wie Magie an. Ich kopierte diese langen, komplexen Zeichenfolgen von Generatoren, passte einige Zahlen an und hoffte das Beste. Aber sobald ich tatsächlich lernte, wie sie funktionieren, wurden Farbverläufe zu einem meiner Lieblings-CSS-Tools. Sie sind unglaublich vielseitig, leistungsfreundlich und können jedem Design ernsthafte Professionalität verleihen.
Dieses Tutorial führt Sie von grundlegenden linearen Farbverläufen bis hin zu fortgeschrittenen Techniken, mit plethora von Codebeispielen, die Sie tatsächlich verwenden können. Lassen Sie uns eintauchen.
Lineare Farbverläufe: Das Fundament
Lineare Farbverläufe sind die häufigste Art. Sie übergehen Farben entlang einer geraden Linie. Die grundlegende Syntax ist unkompliziert:
background: linear-gradient(Richtung, Farbe1, Farbe2, ...);
Grundlegender Zweifarben-Verlauf
Der einfachste Farbverlauf verwendet zwei Farben. Standardmäßig fließt er von oben nach unten:
.simple-gradient {
background: linear-gradient(#667eea, #764ba2);
}
Dies erstellt einen weichen Übergang von Lila zu einem tieferen Lila-Blau. Sauber und effektiv.
Richtung steuern
Sie können die Richtung mit Schlüsselwörtern oder Grad steuern:
.horizontal-gradient {
background: linear-gradient(to right, #667eea, #764ba2);
}
.diagonal-gradient {
background: linear-gradient(135deg, #667eea, #764ba2);
}
Schlüsselwörter (to right, to bottom right, usw.) sind lesbarer, aber Grad geben Ihnen präzise Kontrolle. 135deg ist ein beliebter Diagonaler, der Tiefe erzeugt, ohne zu extrem zu sein.
Farbstops: Präzise Kontrolle
Farbstops lassen Sie genau angeben, wo jede Farbe erscheint:
.color-stops {
background: linear-gradient(
90deg,
#667eea 0%,
#764ba2 50%,
#667eea 100%
);
}
Dies erstellt einen Farbverlauf, der übergeht und dann zurückübergeht. Sie können auch Pixel oder andere Einheiten anstelle von Prozenten verwenden. Harte Stops (kein Übergang) sind großartig für gestreifte Effekte:
.hard-stop {
background: linear-gradient(
90deg,
#667eea 50%,
#764ba2 50%
);
}
Mehrfarbige Farbverläufe
Es gibt keine Begrenzung für die Anzahl der Farben, die Sie verwenden können. Mehr Farben schaffen komplexere Effekte:
.multi-color {
background: linear-gradient(
45deg,
#667eea,
#764ba2,
#f093fb,
#f5576c
);
}
Der Schlüssel bei mehrfarbigen Farbverläufen ist der Abstand. Wenn Farben zu nah sind, wird der Farbverlauf schlammig. Zu weit auseinander und Sie verlieren den weichen Übergang. Experimentieren Sie mit Farbstops, um das richtige Gleichgewicht zu finden.
Radiale Farbverläufe: Runde Tiefe
Radiale Farbverläufe strahlen von einem Mittelpunkt aus und erzeugen Tiefe und Fokus. Sie sind perfekt für Spotlight-Effekte, subtile Vignettierungen oder die Erstellung von kugelförmigen Erscheinungen.
Grundlegender radialer Farbverlauf
.basic-radial {
background: radial-gradient(circle, #667eea, #764ba2);
}
Standardmäßig ist der Kreis zentriert. Sie können die Position und Größe ändern:
.positioned-radial {
background: radial-gradient(
circle at top left,
#667eea,
#764ba2
);
}
Größe des radialen Farbverlaufs
Steuern Sie, wie weit sich der Farbverlauf erstreckt:
.sized-radial {
background: radial-gradient(
circle at center,
#667eea 0%,
#764ba2 30%,
#667eea 60%
);
}
Dies erstellt einen konzentrischen Ring-Effekt. Nützlich für Targeting, Badges oder die Erstellung von Fokuspunkten.
Konische Farbverläufe: Die moderne Option
Konische Farbverläufe rotieren um einen Mittelpunkt und erzeugen kreisdiagrammähnliche Effekte. Sie sind neuer, aber jetzt weit verbreitet. Perfekt für Loader, Fortschrittsanzeiger oder die Erstellung von Tiefe in runden Elementen.
Grundlegender konischer Farbverlauf
.basic-conic {
background: conic-gradient(
#667eea,
#764ba2,
#667eea
);
}
Konischer Farbverlauf mit Startwinkel
.angled-conic {
background: conic-gradient(
from 45deg,
#667eea,
#764ba2,
#f093fb,
#667eea
);
}
Pro-Tipp:
Konische Farbverläufe sind perfekt für die Erstellung von benutzerdefinierten Kreisdiagrammen, Fortschrittsringen oder Loadern. Sie sind viel flexibler als der Versuch, diese Effekte mit anderen Farbverlaufstypen vorzutäuschen.
Fortgeschrittene Techniken
Verlaufs-Overlays
Schichten Sie Farbverläufe über Bilder für Tiefe und Lesbarkeit:
.gradient-overlay {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.8) 100%
), url('your-image.jpg');
background-size: cover;
}
Diese Technik ist überall — Hero-Bilder, Karten, Overlays. Der Farbverlauf macht Text gegen jedes Hintergrundbild lesbar.
Verlaufs-Ränder
Erstellen Sie Verlaufs-Ränder ohne zusätzliches Markup:
.gradient-border {
background: white;
border: 3px solid transparent;
background-clip: padding-box;
position: relative;
&::before {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
background: linear-gradient(45deg, #667eea, #764ba2);
border-radius: inherit;
z-index: -1;
}
}
Verlaufstext
Machen Sie Text selbst farbverlaufsfarbig:
.gradient-text {
background: linear-gradient(45deg, #667eea, #764ba2);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
Dieser Effekt ist augenfällig für Überschriften, Logos oder CTAs. Stellen Sie nur sicher, dass die Verlaufsfarben genügend Kontrast zum Hintergrund bieten.
Hinweise zur Verlaufsanimation
Animierte Farbverläufe können Ihrem Leben Leben verleihen, aber halten Sie sie subtil:
.animated-gradient {
background: linear-gradient(
-45deg,
#667eea,
#764ba2,
#f093fb,
#f5576c
);
background-size: 400% 400%;
animation: gradient 8s ease infinite;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
Der Schlüssel ist eine große Hintergrundgröße und sanfte Animationstiming. Dies erstellt einen verschiebenden, fließenden Effekt, ohne abzulenken.
Barrierefreiheitshinweis:
Einige Benutzer bevorzugen reduzierte Bewegung. Respektieren Sie immer die Medienabfrage prefers-reduced-motion und bieten Sie statische Alternativen für animierte Farbverläufe.
Browser-Kompatibilität
Die gute Nachricht: CSS-Farbverläufe haben hervorragende Unterstützung. Alle modernen Browser unterstützen sie ohne Präfixe. Hier ist, was Sie wissen müssen:
- Lineare Farbverläufe: Überall unterstützt, einschließlich IE10+
- Radiale Farbverläufe: Volle Unterstützung in modernen Browsern, IE10+ mit einigen Syntaxunterschieden
- Konische Farbverläufe: Unterstützt in Chrome 69+, Firefox 71+, Safari 12.1+. Keine IE-Unterstützung (aber IE ist sowieso tot)
Für die meisten Projekte können Sie Farbverläufe verwenden, ohne sich um Fallbacks zu kümmern. Wenn Sie sehr alte Browser unterstützen müssen, bieten Sie eine solide Hintergrundfarbe als Fallback an:
.fallback-gradient {
background: #667eea; /* Fallback */
background: linear-gradient(to right, #667eea, #764ba2);
}
In die Praxis umsetzen
Farbverläufe glänzen, wenn sie zweckmäßig verwendet werden, nicht nur, weil sie cool sind. Hier sind praktische Anwendungsfälle:
- Hero-Bereiche: Tiefe erstellen und Aufmerksamkeit lenken
- Schaltflächen: Taktile Dimension hinzufügen
- Karten: Inhalt mit subtilen Overlays trennen
- Loader: Konische Farbverläufe für Fortschrittsanzeiger
- Text: Verlaufstext für Betonung
Der Schlüssel ist Subtilität. Die meisten Benutzer sollten den Farbverlauf nicht bewusst bemerken — sie sollten nur fühlen, dass das Design poliert und professionell aussieht.
Bereit, Ihre eigenen Farbverläufe zu erstellen? Unser Verlauf-Generator lässt Sie mit Farben, Richtungen und Typen visuell experimentieren. Kopieren Sie das CSS und verwenden Sie es sofort in Ihren Projekten.
Wie jedes CSS-Tool werden Farbverläufe mit Übung einfacher. Beginnen Sie einfach, experimentieren Sie mit verschiedenen Ansätzen und bauen Sie schrittweise Ihre Intuition für das, was funktioniert. Schließlich werden Sie Verlaufspolier zu allem hinzufügen.