CSS Gradients – Farbverläufe im Web
CSS Gradients sind Bilder, die sanfte Übergänge zwischen zwei oder mehr Farben zeigen. Sie werden oft für Hintergründe, Buttons und Overlays verwendet.
Linear Gradient (Linearer Farbverlauf)
Verläuft in einer geraden Linie:
/* Von oben nach unten (Standard) */ background: linear-gradient(#ff0000, #0000ff); /* Mit Richtung */ background: linear-gradient(to right, red, blue); /* Mit Winkel */ background: linear-gradient(45deg, #f06, #9f6); /* Mehrere Farben */ background: linear-gradient(to right, red, yellow, green);
Radial Gradient (Radialer Farbverlauf)
Verläuft kreisförmig vom Zentrum:
/* Kreis vom Zentrum */ background: radial-gradient(circle, #ff0000, #0000ff); /* Ellipse (Standard) */ background: radial-gradient(ellipse, red, blue); /* Position ändern */ background: radial-gradient(circle at top left, red, blue);
Conic Gradient (Kegelförmig)
Verläuft im Kreis um einen Mittelpunkt:
/* Farbkreis */ background: conic-gradient(red, yellow, green, blue, red); /* Tortendiagramm-Effekt */ background: conic-gradient(red 0deg 90deg, blue 90deg 180deg);
Color Stops (Farbstopps)
Kontrollieren Sie, wo Farben beginnen und enden:
/* Farbe bei bestimmter Position */ linear-gradient(red 0%, blue 100%) /* Harter Übergang */ linear-gradient(red 50%, blue 50%) /* Mehrere Stopps */ linear-gradient(red 0%, yellow 50%, green 100%)
Beliebte Gradient-Kombinationen
| Name | CSS |
|---|---|
| Sunset | linear-gradient(to right, #f12711, #f5af19) |
| Ocean | linear-gradient(to right, #2193b0, #6dd5ed) |
| Purple Haze | linear-gradient(to right, #7303c0, #ec38bc) |
| Mint | linear-gradient(to right, #00b09b, #96c93d) |
Tipps für schöne Gradients
- Ähnliche Farben: Sanfte Übergänge wirken natürlicher
- Nicht zu viele Farben: 2-3 Farben sind meist genug
- Transparenz nutzen: rgba() für Overlay-Effekte
- Winkel testen: Verschiedene Richtungen ausprobieren
Häufig gestellte Fragen
Wie mache ich einen Gradient transparent?
Mit rgba() oder transparent:linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0))
Kann ich Gradients animieren?
Direkt nicht, aber Sie können die background-position animieren bei einem größeren Gradient, oder CSS Houdini für echte Gradient-Animation nutzen.
Gradient als Border?
Mit border-image oder einem Pseudo-Element als Hintergrund hinter dem eigentlichen Element mit kleinerem Innenbereich.