Vollstaendiger CSS-Gradienten-Leitfaden

Gradienten sind einer der am haeufigsten verwendeten CSS-Effekte im modernen Webdesign. Instagram, Stripe, Spotify... alle druecken ihre Markenidentitaet mit Gradienten aus.

In diesem Leitfaden werden wir alle Arten von CSS-Gradienten und praktische Anwendungen mit Code-Beispielen erkunden.

---

Gradienten-Grundlagen verstehen

Gradienten-Typen

Grundlegende Syntax

.element {
  background: linear-gradient(direction, color1, color2, ...);
}

---

Linear Gradient: Linearer Gradient

Richtungseinstellungen

/* Schluesselwort-Richtung */
.to-right { background: linear-gradient(to right, #6366f1, #8b5cf6); }
.to-bottom { background: linear-gradient(to bottom, #6366f1, #8b5cf6); }
.to-top-right { background: linear-gradient(to top right, #6366f1, #8b5cf6); }

/* Winkel-Richtung */
.angle-45 { background: linear-gradient(45deg, #6366f1, #8b5cf6); }
.angle-90 { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.angle-180 { background: linear-gradient(180deg, #6366f1, #8b5cf6); }

Richtungs-Schluesselwoerter Zusammenfassung

Farbstopps

/* Gleichmaessige Verteilung (automatisch) */
.auto {
  background: linear-gradient(#ff0000, #00ff00, #0000ff);
  /* 0%, 50%, 100% */
}

/* Explizite Positionen */
.explicit {
  background: linear-gradient(
    #ff0000 0%,
    #ff0000 30%,    /* 0-30%: Rot beibehalten */
    #00ff00 30%,    /* Abrupter Uebergang bei 30% */
    #00ff00 70%,    /* 30-70%: Gruen beibehalten */
    #0000ff 70%     /* Abrupter Uebergang bei 70% */
  );
}

/* Harter Stopp (abrupter Uebergang) */
.hard-stop {
  background: linear-gradient(
    #6366f1 50%,
    #8b5cf6 50%
  );
}

Praktisches Beispiel: Trendige Gradienten

/* Instagram-Stil */
.instagram {
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
}

/* Stripe-Stil */
.stripe {
  background: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 100%
  );
}

/* Glassmorphism-Hintergrund */
.glassmorphism {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  backdrop-filter: blur(10px);
}

---

Radial Gradient: Radialer Gradient

Grundlegende Syntax

.radial {
  background: radial-gradient(shape size at position, color1, color2, ...);
}

Form

/* Kreis */
.circle {
  background: radial-gradient(circle, #6366f1, #8b5cf6);
}

/* Ellipse (Standard) */
.ellipse {
  background: radial-gradient(ellipse, #6366f1, #8b5cf6);
}

Groesse

.size-demo {
  background: radial-gradient(circle closest-side at 30% 30%, #6366f1, #8b5cf6);
}

Praktisches Beispiel: Spotlight-Effekt

.spotlight {
  background:
    radial-gradient(
      circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(99, 102, 241, 0.3) 0%,
      transparent 50%
    ),
    #1a1a2e;
}

// Spotlight folgt der Maus
document.addEventListener('mousemove', (e) => {
  const x = (e.clientX / window.innerWidth) * 100;
  const y = (e.clientY / window.innerHeight) * 100;
  document.documentElement.style.setProperty('--mouse-x', `${x}%`);
  document.documentElement.style.setProperty('--mouse-y', `${y}%`);
});

---

Conic Gradient: Konischer Gradient

Grundlegende Beispiele

/* Farbrad */
.color-wheel {
  background: conic-gradient(
    red, yellow, lime, aqua, blue, magenta, red
  );
  border-radius: 50%;
}

/* Kreisdiagramm */
.pie-chart {
  background: conic-gradient(
    #6366f1 0deg 90deg,      /* 25% */
    #8b5cf6 90deg 180deg,    /* 25% */
    #a78bfa 180deg 270deg,   /* 25% */
    #c4b5fd 270deg 360deg    /* 25% */
  );
  border-radius: 50%;
}

Praktisches Beispiel: Donut-Diagramm

.donut-chart {
  background: conic-gradient(
    #6366f1 0deg 120deg,
    #8b5cf6 120deg 240deg,
    #a78bfa 240deg 360deg
  );
  border-radius: 50%;
  position: relative;
}

.donut-chart::after {
  content: '';
  position: absolute;
  inset: 25%;
  background: white;
  border-radius: 50%;
}

---

Repeating Gradients: Wiederholende Muster

Wiederholender Linear

/* Streifenmuster */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #6366f1,
    #6366f1 10px,
    #8b5cf6 10px,
    #8b5cf6 20px
  );
}

/* Warnband */
.warning-tape {
  background: repeating-linear-gradient(
    45deg,
    #fbbf24,
    #fbbf24 20px,
    #1f2937 20px,
    #1f2937 40px
  );
}

---

Animierte Gradienten

Positionsanimation

.animated-gradient {
  background: linear-gradient(
    270deg,
    #6366f1,
    #8b5cf6,
    #a78bfa,
    #c4b5fd
  );
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Sanfter Farbuebergang mit @property

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.smooth-rotate {
  --gradient-angle: 0deg;
  background: conic-gradient(
    from var(--gradient-angle),
    #6366f1, #8b5cf6, #6366f1
  );
  animation: rotate-gradient 3s linear infinite;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

---

Gradienten-Text

Grundlegende Implementierung

.gradient-text {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Animierter Text

.animated-text {
  background: linear-gradient(
    90deg,
    #6366f1,
    #8b5cf6,
    #a78bfa,
    #6366f1
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-shine 3s linear infinite;
}

@keyframes text-shine {
  to { background-position: 300% 0; }
}

---

Performance-Optimierung

GPU-Beschleunigung nutzen

/* Mit transform animieren */
.optimized {
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  transform: translateZ(0); /* GPU-Layer erstellen */
}

---

FAQ

Q1: Die Auswahl von Gradient-Farben ist schwierig. Irgendwelche empfohlenen Kombinationen?

A: Schauen Sie sich beliebte Gradient-Presets beim Gradient Generator an. Ausserdem sieht es natuerlich aus, mit aehnlichen Farbfamilien (Lila-Blau, Orange-Pink) zu beginnen.

Q2: Funktionieren Gradienten im IE?

A: IE11 unterstuetzt linear-gradient und radial-gradient, aber nicht conic-gradient. Stand 2026 ist die IE-Unterstuetzung weitgehend beendet.

Q3: Beeinflussen Gradienten die Bundle-Groesse?

A: CSS-Gradienten sind viel leichter als Bilder. Selbst komplexe Gradienten werden in nur wenigen CSS-Zeilen ausgedrueckt, mit minimaler Auswirkung auf die Bundle-Groesse.

Q4: Wie stelle ich die Gradienten-Transparenz ein?

A: Verwenden Sie rgba() oder hsla().

background: linear-gradient(rgba(99, 102, 241, 0.5), rgba(139, 92, 246, 0.5));

Q5: Meine Gradienten-Animation ruckelt.

A: Anstatt background-position-Animation ist das Animieren von CSS-Variablen mit @property fluessiger. Oder verwenden Sie filter: hue-rotate().

---

Fazit

CSS-Gradienten Kernpunkte:

1. Linear: Richtung + Farbstopps
2. Radial: Form + Groesse + Position
3. Konisch: Rotationswinkel + Position
4. Mehrere Ebenen: Durch Kommas getrennt, von oben nach unten gestapelt
5. Animation: background-position oder @property

---

Verwandte Tools