CSS-Verlaufshintergründe erstellen — Schritt-für-Schritt Tutorial
Verlaufshintergründe sind eines der wirkungsvollsten Mittel im CSS-Werkzeugkasten. Von einfachen Zwei-Farben-Übergängen bis zu komplexen Mesh-Gradienten — mit CSS lässt sich heute fast alles realisieren, was früher Bildbearbeitung erforderte. Dieses Tutorial führt Schritt für Schritt durch die verschiedenen Techniken, von den Grundlagen bis zu fortgeschrittenen Anwendungen, mit Beispielen zum sofortigen Ausprobieren im WikiPlus CSS-Gradient Generator.
Schritt 1: Einfacher linearer Verlauf
Der einfachste CSS-Gradient braucht nur eine Richtung und zwei Farben. Starten wir mit einem klassischen Blau-zu-Cyan-Verlauf: .element { background: linear-gradient(to right, #0011ff, #00ccff); }. Die Richtung to right bedeutet, der Verlauf geht von links nach rechts. Man kann auch Winkel verwenden: 90deg bedeutet dasselbe wie to right; 0deg geht von unten nach oben; 45deg geht diagonal von unten-links nach oben-rechts. Die Syntax ist konsistent und intuitiv. Im WikiPlus CSS-Gradient Generator wählt man Farben per Farbpicker und passt die Richtung mit einem Schieberegler an — der Code wird automatisch generiert. Für den nächsten Schritt: Experimentiere mit verschiedenen Farbkombinationen und Richtungen im Generator.
Schritt 2: Mehrere Farbstopps und Transparenz
Mit mehr als zwei Farben werden Verläufe interessanter. Hier ein Sonnenuntergangs-Verlauf: .sunset { background: linear-gradient(180deg, #FF6B35 0%, #F7931E 30%, #FFD700 60%, #FFF9C4 100%); }. Die Prozentzahlen definieren, wo welche Farbe am stärksten ist. Ein weiterer wichtiger Effekt: Verläufe mit Transparenz. Besonders nützlich für Text-Overlays auf Bildern: .overlay { background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); }. Dieser Verlauf beginnt vollständig transparent oben und endet in 70% schwarzer Deckkraft unten — perfekt, um Text auf einem Foto lesbar zu machen, ohne das Foto vollständig zu verdecken. Diese Technik sieht man häufig bei Nachrichten-Websites und Portfolios.
Schritt 3: Radiale Verläufe und Spotlight-Effekte
Radiale Verläufe eignen sich besonders für Spotlight- und Licht-Effekte. Ein einfaches Beispiel: .spotlight { background: radial-gradient(circle at 50% 30%, #ffffff 0%, #0011ff 60%); }. circle at 50% 30% bedeutet: kreisförmig, Mittelpunkt bei 50% horizontal und 30% vertikal. Für einen subtilen Innen-Leuchteffekt: .glowing { background: radial-gradient(ellipse at center, rgba(0,200,255,0.3) 0%, transparent 70%); }. Das ist eine elliptische Form, die in der Mitte leuchtet und zu den Rändern hin transparent wird — gut kombinierbar mit einem dunklen Hintergrund. Für komplexere Effekte können mehrere Gradients gestapelt werden: background: radial-gradient(circle at 20% 80%, rgba(255,100,0,0.5), transparent 50%), radial-gradient(circle at 80% 20%, rgba(0,100,255,0.5), transparent 50%), #1a1a2e.
Schritt 4: Animated Gradients und Hover-Effekte
Gradient-Animationen verleihen Designs dynamik. Eine elegante Technik: den Gradient nicht direkt animieren (das ist in CSS teuer), sondern background-position bei einem größeren background-size. .animated-gradient { background: linear-gradient(270deg, #0011ff, #00ccff, #0011ff); background-size: 200% 200%; animation: gradientShift 4s ease infinite; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }. Für Hover-Effekte ist ein Trick mit opacity und einem Pseudo-Element eleganter als direktes Gradient-Animieren: Man legt den Hover-Gradient in einem ::after-Pseudo-Element ab und animiert dessen opacity von 0 auf 1. Das ist performanter und vermeidet Layout-Recalculations.
Häufig gestellte Fragen
- Warum sieht mein CSS-Gradient in verschiedenen Browsern unterschiedlich aus?
- Moderne Browser rendern CSS-Gradients sehr konsistent. Unterschiede entstehen oft durch unterschiedliche Gamma-Korrektur oder Farbprofile der Displays. Für maximale Konsistenz kann color-interpolation-method: in srgb in modernen Browsern angegeben werden.
- Wie erstelle ich einen Gradient mit hartem Farbwechsel (ohne Übergang)?
- Setze zwei benachbarte Farbstopps auf dieselbe Position: linear-gradient(to right, red 50%, blue 50%). Dort, wo beide Farben dieselbe Prozentposition haben, gibt es eine harte Kante statt eines weichen Übergangs.
- Kann CSS-Gradient auch für Border, Text oder Box-Shadow verwendet werden?
- Für Text: background + background-clip: text + color: transparent. Für Borders: border-image: linear-gradient(...) 1. Für Box-Shadow ist kein direktes Gradient möglich, aber man kann Pseudo-Elemente mit Gradient-Hintergrund als 'gefärbten Schatten' einsetzen.