CSS-Schatten-Generator: Box-Shadow und Text-Shadow leicht gemacht

31. März 2026 · 12 Min. Lesezeit

CSS-Schatten verstehen

Haben Sie schon einmal bemerkt, wie manche Web-Elemente vom Bildschirm „abzuheben" scheinen, während andere flach und leblos wirken? Diese visuelle Magie liegt oft an einem leistungsstarken CSS-Feature: Schatten. Sie verleihen Elementen wie Buttons, Karten und Überschriften einen Hauch von Tiefe, der eine zweidimensionale Oberfläche in etwas Greifbares und Interaktives verwandelt.

CSS-Schatten sind nicht nur dekorative Verzierungen. Sie erfüllen wichtige funktionale Zwecke im modernen Webdesign. Schatten schaffen visuelle Hierarchie, lenken die Aufmerksamkeit der Nutzer, zeigen Interaktivität an und etablieren räumliche Beziehungen zwischen Elementen. Wenn ein Button einen subtilen Schatten hat, verstehen Nutzer instinktiv, dass er anklickbar ist. Wenn sich dieser Schatten beim Hover ändert, bestätigt dies, dass das Element interaktiv ist.

Die Psychologie hinter Schatten wurzelt darin, wie wir die physische Welt wahrnehmen. Im echten Leben werfen Objekte Schatten basierend auf ihrer Entfernung zu einer Oberfläche und der Lichtquelle. Indem wir diese natürlichen Phänomene im Webdesign nachahmen, schaffen wir Oberflächen, die vertraut und intuitiv wirken. Eine Karte mit einem weichen Schatten scheint über der Seite zu schweben, während ein gedrückter Button mit einem Inset-Schatten in die Oberfläche eingelassen aussieht.

CSS bietet zwei primäre Schatten-Eigenschaften: box-shadow für Element-Container und text-shadow für Typografie. Obwohl sie ähnliche Syntaxmuster teilen, dient jede unterschiedlichen Zwecken und bietet einzigartige kreative Möglichkeiten. Beide zu verstehen ermöglicht es Ihnen, ausgefeilte visuelle Effekte zu gestalten, die Ihr gesamtes Design-System aufwerten.

Box-Shadows: Grundlagen und Syntax

Box-Shadows sind die Arbeitspferde der CSS-Tiefeneffekte. Sie werden auf das gesamte Box-Modell eines Elements angewendet und erzeugen Schatten um Buttons, Karten, Bilder, Container und praktisch jedes HTML-Element. Die box-shadow-Eigenschaft ist bemerkenswert flexibel und unterstützt alles von subtilen Erhebungshinweisen bis zu dramatischen Lichteffekten.

Hier ist die vollständige Syntax für Box-Shadows:

element {
  box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
}

Lassen Sie uns jede Komponente im Detail aufschlüsseln:

Hier ist ein praktisches Beispiel eines modernen Buttons mit einem subtilen Erhebungsschatten:

.button-primary {
  background: #6366f1;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.button-primary:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

Dies erzeugt einen Button, der leicht von der Seite abgehoben erscheint. Beim Hover wird der Schatten größer und weicher, was die Illusion erzeugt, dass der Button näher zum Nutzer aufsteigt. Diese subtile Interaktion liefert sofortiges visuelles Feedback, dass das Element interaktiv ist.

Offset-Werte verstehen

Die Offset-Werte (offset-x und offset-y) bestimmen, wo Ihr Schatten relativ zum Element erscheint. Diese Werte simulieren die Position einer Lichtquelle:

• Positives offset-x: Schatten erscheint rechts (Lichtquelle von links)
• Negatives offset-x: Schatten erscheint links (Lichtquelle von rechts)
• Positives offset-y: Schatten erscheint unten (Lichtquelle von oben)
• Negatives offset-y: Schatten erscheint oben (Lichtquelle von unten)
• Beide null: Schatten erscheint gleichmäßig um das Element (zentrierte Lichtquelle)

Die meisten natürlich aussehenden Schatten verwenden positive offset-y-Werte, weil wir daran gewöhnt sind, dass Licht in der physischen Welt von oben kommt. Ein gängiges Muster ist 0 2px für subtile Erhebung oder 0 8px für ausgeprägtere Tiefe.

Blur-Radius und Spread-Radius

Der Blur-Radius steuert die Schattenweichheit. Ein Wert von 0 erzeugt einen scharfkantigen Schatten, während größere Werte zunehmend weiche, diffuse Schatten erzeugen. Für die meisten UI-Elemente funktionieren Blur-Werte zwischen 4px und 20px gut.

Der Spread-Radius wird oft missverstanden. Er erweitert oder verkleinert den Schatten, bevor die Unschärfe angewendet wird. Ein positiver Spread macht den Schatten größer als das Element, während ein negativer Spread ihn kleiner macht. Dies ist nützlich, um Schatten zu erstellen, die sich nicht so weit wie das Element selbst erstrecken.

Fortgeschrittene Box-Shadow-Techniken

Sobald Sie grundlegende Box-Shadows beherrschen, können Sie fortgeschrittene Techniken erkunden, die ausgefeilte visuelle Effekte erzeugen. Diese Methoden werden von führenden Design-Systemen und modernen Webanwendungen verwendet, um polierte, professionelle Oberflächen zu erreichen.

Geschichtete Schatten für realistische Tiefe

Reale Schatten sind nicht einheitlich. Sie haben sowohl scharfe als auch weiche Komponenten. Sie können mehrere Schatten auf einem einzelnen Element stapeln, indem Sie sie mit Kommas trennen:

.card-elevated {
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

.card-floating {
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.15),
    0 3px 6px rgba(0, 0, 0, 0.10);
}

Diese Technik, popularisiert durch Material Design, erzeugt realistischere Schatten, indem sie einen größeren, weicheren Schatten mit einem kleineren, schärferen kombiniert. Das Ergebnis ahmt nach, wie sich Licht in der physischen Welt verhält, wo Schatten sowohl Umbra (dunkler Kern) als auch Penumbra (weiche Kanten) haben.

Inset-Schatten für Tiefe und Textur

Das inset-Schlüsselwort dreht den Schatten um, sodass er innerhalb des Elements statt außerhalb erscheint. Dies erzeugt das Erscheinungsbild von Tiefe, Vertiefung oder Textur:

.input-field {
  background: white;
  border: 1px solid #e5e7eb;
  padding: 10px 15px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.pressed-button {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

Inset-Schatten sind perfekt für Formulareingaben und geben ihnen ein subtiles vertieftes Erscheinungsbild, das suggeriert, dass sie in die Seite „eingemeißelt" sind. Sie sind auch ausgezeichnet für aktive/gedrückte Button-Zustände und erzeugen taktiles Feedback.

Farbige Schatten für Markenidentität

Wer sagt, dass Schatten schwarz oder grau sein müssen? Farbige Schatten können die Markenidentität verstärken und unverwechselbare visuelle Stile schaffen:

.brand-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(99, 102, 241, 0.2);
}

.success-button {
  background: #10b981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

Die Verwendung Ihrer Markenfarbe in Schatten mit niedriger Deckkraft erzeugt kohärente, einprägsame Designs. Diese Technik ist besonders effektiv für Call-to-Action-Buttons und hervorgehobene Inhaltskarten.

Neumorphismus und Soft UI

Neumorphismus erzeugt Oberflächen, die aus dem Hintergrund herauszuragen oder in ihn einzudringen scheinen. Dies erfordert die Kombination von hellen und dunklen Schatten:

.neumorphic-card {
  background: #e0e5ec;
  border-radius: 20px;
  box-shadow:
    9px 9px 16px rgba(163, 177, 198, 0.6),
    -9px -9px 16px rgba(255, 255, 255, 0.5);
}

Obwohl Neumorphismus einen Moment der Popularität hatte, verwenden Sie ihn sparsam. Er kann Barrierefreiheitsprobleme aufgrund von niedrigem Kontrast verursachen und funktioniert am besten für dekorative Elemente statt für kritische UI-Komponenten.

Text-Shadows erklärt

Text-Shadows werden speziell auf Textinhalte angewendet und erzeugen Tiefe, Betonung oder dekorative Effekte auf Typografie. Die text-shadow-Eigenschaft verwendet eine einfachere Syntax als Box-Shadows, bietet aber ebenso leistungsstarke kreative Möglichkeiten.

Hier ist die grundlegende Syntax:

element {
  text-shadow: offset-x offset-y blur-radius color;
}

Beachten Sie, dass Text-Shadows keinen Spread-Radius oder das Inset-Schlüsselwort enthalten. Die Eigenschaft konzentriert sich auf drei Schlüsselwerte:

Hier ist ein praktisches Beispiel für eine Hero-Überschrift:

h1.hero-title {
  font-size: 48px;
  font-weigh