Was ist die CSS-Eigenschaft box-shadow?

Die CSS-Eigenschaft box-shadow fügt einem oder mehreren Schatten um den Rahmen eines Elements hinzu. Jeder Schatten wird durch Offset-Werte (X und Y), optionalen Blur-Radius, optionalen Spread-Radius und Farbe beschrieben.

Was bedeuten Offset, Blur und Spread?

Horizontaler Offset (X) verschiebt den Schatten nach rechts (positiv) oder links (negativ). Vertikaler Offset (Y) nach unten oder oben. Blur weicht die Schattenkante auf. Spread erweitert oder verkleinert den Schatten.

Was ist ein Inset-Schatten?

Das Keyword inset kehrt die Schattenrichtung um und lässt ihn im Inneren des Elements erscheinen. Inset-Schatten werden für gedrückte Schaltflächen und vertiefte Eingabefelder verwendet.

Wie füge ich mehrere Schatten zu einem Element hinzu?

Trenne mehrere Schattenwerte mit Kommas: `box-shadow: 2px 2px 4px rgba(0,0,0,0.3), -2px -2px 4px rgba(255,255,255,0.5);`.

Beeinflusst box-shadow das Layout?

Nein, box-shadow beeinflusst weder Layout noch Reflow. Es ist rein visuell und außerhalb des normalen Flusses gerendert.

Wie verwende ich box-shadow für Card-Elevation?

Material Design definiert Elevationsstufen durch zunehmende box-shadow-Werte. Ein dezenter Schatten deutet niedrige Elevation an, ein stärkerer hohe Elevation für Modals.

Wird box-shadow in allen Browsern unterstützt?

box-shadow wird seit IE9 von allen modernen Browsern unterstützt. Keine Vendor-Präfixe nötig.

Box Shadow
Generator

Gestalten Sie perfekte CSS Box-Shadows mit Live-Vorschau. Passen Sie Offset, Blur, Spread und Farbe an — stapeln Sie mehrere Layer für Tiefe.

Offset · Blur · SpreadMulti-Layer-SchattenCSS-ready

① X, Y, Blur, Spread anpassen ② Bis zu 3 Schatten schichten ③ CSS kopieren

Presets:

Layer 1

Horizontaler Offset: 5px

Vertikaler Offset: 10px

Blur-Radius: 20px

Spread-Radius: 0px

Schattenfarbe

#000000

Deckkraft: 0.25

Inset-Schatten

Erzeugtes CSS

box-shadow: 5px 10px 20px 0px rgba(0, 0, 0, 0.25);

Offset

X- und Y-Offset steuern die Schattenrichtung. Positives X schiebt nach rechts, negatives nach links. Positives Y nach unten, negatives nach oben.

Blur & Spread

Blur-Radius macht Schattenränder weicher (0 = scharf). Spread erweitert oder verkleinert den Schatten über die Elementgrenzen hinaus.

Inset

Inset-Schatten erscheinen innerhalb des Elements und erzeugen einen eingedrückten Effekt statt eines äußeren Schlagschattens.

CSS box-shadow — wie es funktioniert und wann man es verwendet

Die CSS-Eigenschaft box-shadow fügt Schatteneffekte um den Rahmen eines Elements hinzu. Sie akzeptiert horizontalen Offset (X), vertikalen (Y), Blur-Radius, Spread-Radius und Farbe. rgba() mit geringer Deckkraft (0.1–0.25) erzeugt weiche, realistische Schatten. Das Schlüsselwort inset platziert den Schatten im Inneren für gedrückte Schaltflächen. Mehrere Schatten per Komma gestapelt ermöglichen Material Design Elevation und Neumorphismus-Effekte. box-shadow beeinflusst das Layout nicht und ist GPU-composited — anders als filter: drop-shadow(), das den Alpha-Kanal des Elements berücksichtigt.

Häufig gestellte Fragen

Die CSS-Eigenschaft box-shadow fügt Schatteneffekte um den Rahmen eines Elements hinzu. Sie können mehrere Schatten mit kommagetrennten Werten setzen.

box-shadow: X Y blur spread farbe. X und Y versetzen die Schattenposition. Blur macht Ränder weicher. Spread erweitert (positiv) oder schrumpft (negativ) die Schattengröße vor dem Blur.

box-shadow folgt dem rechteckigen Box-Modell. filter: drop-shadow() respektiert den Alpha-Kanal des Elements, geeignet für transparente PNGs und SVGs.

"inset" platziert den Schatten innerhalb des Elementrahmens statt außen, was einen eingedrückten Effekt erzeugt.

Nein. box-shadow beeinflusst weder das Layout noch nimmt es Platz im Dokumentfluss ein. Es ist rein visuell.

Realistische Schatten verwenden rgba() mit niedriger Deckkraft (0.1–0.3), moderatem Blur (15–30px), keinem Spread und kleinem positivem Y-Offset. 2–3 gestapelte Schatten geben das natürlichste Ergebnis.

Ja. box-shadow wird von allen gängigen Browsern seit IE9 unterstützt und benötigt keine Vendor-Präfixe.

CSS box-shadow — wie es funktioniert und wann man es verwendet

Häufig gestellte Fragen

Unser Netzwerk entdecken