Während die meisten Entwickler 2026 noch mit flachen, leblosen Schatten arbeiten, setzen Profis auf einen atemberaubenden Gradient-Glow-Effekt, der Designs förmlich vom Bildschirm springen lässt. Das Beste daran? Die Umsetzung ist überraschend einfach.[youtube]​

Das Problem mit traditionellen Box-Shadows

Die meisten Entwickler verwenden für ihre Elemente – sei es eine Pricing-Card oder ein Button – eine klassische box-shadow-Eigenschaft. Ein typischer Code sieht so aus:[youtube]​

cssbox-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);

Schauen wir uns die einzelnen Werte an:[youtube]​

  • 0 Pixel horizontaler Versatz: Der Schatten ist zentriert
  • 10 Pixel vertikaler Versatz: Der Schatten wird leicht nach unten verschoben
  • 40 Pixel Blur-Radius: Sorgt für einen weichen, ausgedehnten Schatten
  • RGBA-Wert: Ein einfacher schwarzer Schatten mit 50% Deckkraft

Das Problem: Dieser Ansatz ist flach, eindimensional und entspricht nicht den Anforderungen moderner Designs.[youtube]​

Die Lösung: Pseudo-Elemente und Conic-Gradients

Der Schlüssel zu professionellen Gradient-Schatten liegt in der Verwendung von ::after-Pseudo-Elementen. Diese Technik ermöglicht es, eine unsichtbare Ebene hinter dem eigentlichen Element zu erstellen und dort den Gradient-Effekt zu platzieren.[geeksforgeeks]​[youtube]​

Schritt 1: Das Pseudo-Element erstellen

Der Grundaufbau sieht folgendermaßen aus:[youtube]​

css.element::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  z-index: -1;
}

Hier passiert Folgendes:[youtube]​

  • content: „“: Erstellt ein leeres Pseudo-Element
  • position: absolute: Ermöglicht die präzise Positionierung
  • inset: -2px: Eine clevere Kurzschreibweise für top, right, bottom und left, alle auf -2 Pixel gesetzt
  • border-radius: 24px: Passt die Rundung an das Haupt-Element an
  • z-index: -1: Platziert den Schatten hinter dem Element

Schritt 2: Der magische Conic-Gradient

Jetzt kommt der spektakuläre Teil: der conic-gradient. Ein konischer Gradient funktioniert wie ein Farbrad, das sich um einen zentralen Punkt dreht.[lambdatest]​[youtube]​

cssbackground: conic-gradient(
  from 0deg at 50% 50%,
  #4f46e5 0deg,
  #06b6d4 90deg,
  #8b5cf6 180deg,
  #ec4899 270deg,
  #4f46e5 360deg
);

Die Farbverteilung erfolgt wie folgt:[youtube]​

  • 0°: Indigo-Blau als Startpunkt
  • 90°: Übergang zu Cyan
  • 180°: Wechsel zu Lila
  • 270°: Übergang zu Pink
  • 360°: Zurück zu Indigo-Blau für einen nahtlosen Verlauf

Diese Konstruktion erzeugt einen gleichmäßigen, weichen Farbübergang, der das gesamte Element umschließt.[developer.mozilla]​[youtube]​

Schritt 3: Die entscheidende Blur-Filter-Technik

Würden wir an dieser Stelle aufhören, hätten wir lediglich einen bunten Rahmen. Die wahre Magie entsteht durch eine einzige Zeile Code:[youtube]​

cssfilter: blur(30px);
opacity: 0.8;

Der blur-Filter mit 30 Pixeln verwandelt den scharfen Gradienten in einen weichen, leuchtenden Schatteneffekt. Es ist vergleichbar mit einem Diffusionsfilter bei einer Lichtquelle. Die opacity von 0.8 macht den Effekt leicht transparent, sodass er sich harmonisch mit dem Hintergrund verbindet, ohne zu dominant zu wirken.[geeksforgeeks]​[youtube]​

Der vollständige Code

Hier ist der komplette CSS-Code für den Gradient-Shadow-Effekt:[youtube]​

css.pricing-card {
  position: relative;
  background: white;
  border-radius: 24px;
  padding: 30px;
}

.pricing-card::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  background: conic-gradient(
    from 0deg at 50% 50%,
    #4f46e5 0deg,
    #06b6d4 90deg,
    #8b5cf6 180deg,
    #ec4899 270deg,
    #4f46e5 360deg
  );
  z-index: -1;
  filter: blur(30px);
  opacity: 0.8;
}

Alternative Ansätze

Neben dem conic-gradient gibt es weitere Möglichkeiten, Gradient-Schatten zu erstellen:[lambdatest]​

  1. Linear-Gradient: Für einfache, gerichtete Farbverläufe von oben nach unten oder diagonal
  2. Radial-Gradient: Für kreisförmige oder elliptische Farbverläufe vom Zentrum nach außen
  3. Drop-Shadow-Filter: Mehrere drop-shadow()-Funktionen mit unterschiedlichen Farben können kombiniert werden, um einen Gradient-Effekt zu erzeugen

Warum dieser Effekt professionelle Designs auszeichnet

Der Unterschied zwischen Amateur- und Profi-Designs liegt oft in solchen Details. Während traditionelle Box-Shadows funktional sind, verleihen Gradient-Schatten deinem Design:[youtube]​

  • Tiefe und Dimension: Der mehrfarbige Glow erzeugt einen dreidimensionalen Effekt
  • Modernität: Der Effekt entspricht aktuellen Design-Trends
  • Visuelle Hierarchie: Wichtige Elemente können durch den leuchtenden Schatten hervorgehoben werden
  • Markenwiedererkennung: Individuelle Farbkombinationen stärken die visuelle Identität

Browser-Kompatibilität und Best Practices

Die verwendeten CSS-Eigenschaften (conic-gradient, filter: blur(), Pseudo-Elemente) werden von allen modernen Browsern unterstützt. Für optimale Ergebnisse solltest du folgende Punkte beachten:[lambdatest]​

  • Teste deine Gradient-Schatten auf verschiedenen Bildschirmgrößen
  • Achte auf ausreichenden Kontrast zum Hintergrund
  • Verwende opacity sparsam, um den Effekt nicht zu überladen
  • Passe die blur-Werte an die Größe deiner Elemente an

Fazit

Mit dieser einfachen CSS-Technik kannst du deine langweiligen Box-Shadows in beeindruckende Gradient-Glows verwandeln. Die Kombination aus Pseudo-Elementen, konischen Gradienten und Blur-Filtern ist das Geheimnis professioneller Webdesigner im Jahr 2026. Probiere es aus und bringe deine Designs auf das nächste Level!