Übersicht

Die CSS-Eigenschaft box-shadow beschreibt einen oder mehrere Schatteneffekte als eine kommaseparierte Liste. Sie erlaubt es, den Rahmen fast jedes Elements einen Schatten werfen zu lassen. Falls ein border-radius für das Element mit einem Schlagschatten angegeben ist, übernimmt der Schatten diese abgerundeten Ecken. Die z-Anordnung mehrerer Schlagschatten ist die gleiche wie bei mehreren Textschatten (der zuerst angegebene Schatten ist der oberste).

Box-shadow-Generator ist ein interaktives Werkzeug, das es erlaubt, einen Schlagschatten zu generieren.

Initialwertnone
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter.
VererbtNein
Medienvisuell
Berechneter WertLängen absolut gemacht; angegebene Farben berechnet; ansonsten wie angegeben
Animationstypeine Liste von Schatten
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Beliebige Anzahl an Schatten, durch Kommas getrennt */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

Werte

inset
Falls nicht angegeben (Standardwert), wird angenommen, dass der Schatten ein Schlagschatten ist (als ob die Box über dem Inhalt schweben würde).
Die Angabe des Schlüsselworts inset ändert den Schatten so, dass er innerhalb des Rahmens angezeigt wird (als ob der Inhalt innerhalb der Box nach innen gedrückt wäre). Innere Schatten werden innerhalb des Randes (sogar transparenten) gezeichnet, über dem Hintergrund aber unterhalb des Inhalts.
<offset-x> <offset-y>
Diese zwei <length>-Werte setzen den Schattenabstand. <offset-x> beschreibt die horizontale Distanz. Negative Werte platzieren den Schatten links des Elements. <offset-y> beschreibt die vertikale Distanz. Negative Werte platzieren den Schatten oberhalb des Elements. Siehe <length> für mögliche Einheiten.
Falls beide Werte 0 sind, wird der Schatten hinter dem Element platziert (und können einen Unschärfeeffekt erzeugen, falls <blur-radius> und/oder <spread-radius> gesetzt sind).
<blur-radius>
Dies ist ein dritter <length>-Wert. Je größer dieser Wert ist, desto größer ist die Unschärfe, sodass der Schatten größer und schwächer wird. Negative Werte sind nicht erlaubt. Falls nicht angegeben, ist der Wert 0 (der Rand des Schattens wird scharf dargestellt).
<spread-radius>
Dies ist ein vierter <length>-Wert. Positive Werte erweitern den Schatten und machen ihn größer, negative Werte verkleinern den Schatten. Falls nicht angegeben, ist der Wert 0 (der Schatten hat die gleiche Größe wie das Element).
<color>
Siehe <color>-Werte für mögliche Schlüsselwörter und Notationen.
Falls nicht angegeben, hängt die Farbe vom Browser ab – sie ist normalerweise der Wert der color-Eigenschaft, aber Safari zeichnet in diesem Fall aktuell einen transparenten Schatten.

Interpolation

Jeder Schatten innerhalb der Liste (none wird als eine leere Liste interpretiert) wird über die Farbkomponente (als Farbe) interpoliert und x-, y-, Unschärfe- und (falls zutreffend) Ausbreitungskomponenten (als Länge). Für jeden Schatten gilt, falls beide angegebenen Schatten inset sind oder nicht, muss der interpolierte Schatten diesbezüglich mit den angegebenen Schatten übereinstimmen. Falls ein Schatten eines beliebigen Paares von angegebenen Schatten inset ist und der andere nicht, ist die gesamte Schattenliste nicht interpolierbar. Falls die Listen von Schatten verschiedene Längen haben, wird die kürzere Liste mit Schatten aufgefüllt, deren Farbe transparent ist, alle Längen 0 und dessen inset (oder nicht) mit dem der längeren Liste übereinstimmt.

Formale Syntax

none | <shadow>#

wobei
<shadow> = inset? && <length>{2,4} && <color>?

wobei
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

wobei
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

wobei
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Live-Beispiele

box-shadow: 60px -16px teal;
box-shadow: 10px 5px 5px black;
box-shadow: 3px 3px red, -1em 0 0.4em olive;
box-shadow: inset 5em 1em gold;
box-shadow: 0 0 1em gold;
box-shadow: inset 0 0 1em gold;
box-shadow: inset 0 0 1em gold, 0 0 1em red;

Spezifikationen

Spezifikation Status Kommentar
CSS Backgrounds and Borders Module Level 3
Die Definition von 'box-shadow' in dieser Spezifikation.
Anwärter Empfehlung Ursprüngliche Definition

Browser-Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 10
Hinweise
Vollständige Unterstützung 10
Hinweise
Hinweise Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Vollständige Unterstützung 1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Keine Unterstützung 3.5 — 13
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 44
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Vollständige Unterstützung 9
Hinweise
Vollständige Unterstützung 9
Hinweise
Hinweise To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Hinweise Since version 5.5, Internet Explorer supports Microsoft's DropShadow and Shadow Filter. You can use this proprietary extension to cast a drop shadow (though the syntax and the effect are different from CSS3)
Opera Vollständige Unterstützung 10.5
Hinweise
Vollständige Unterstützung 10.5
Hinweise
Hinweise Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Safari Vollständige Unterstützung 5.1
Hinweise
Vollständige Unterstützung 5.1
Hinweise
Hinweise Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Vollständige Unterstützung 3
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Vollständige Unterstützung Ja
Mit Präfix Hinweise
Vollständige Unterstützung Ja
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Hinweise Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android ? Opera Android Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Safari iOS Vollständige Unterstützung 5
Hinweise
Vollständige Unterstützung 5
Hinweise
Hinweise Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android ?
Multiple shadowsChrome Vollständige Unterstützung 10
Vollständige Unterstützung 10
Vollständige Unterstützung 1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 4
Vollständige Unterstützung 4
Keine Unterstützung 3.5 — 13
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
IE Vollständige Unterstützung 9
Hinweise
Vollständige Unterstützung 9
Hinweise
Hinweise To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Opera Vollständige Unterstützung 10.5Safari Vollständige Unterstützung 5.1
Vollständige Unterstützung 5.1
Vollständige Unterstützung 3
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Vollständige Unterstützung Ja
Mit Präfix
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android ? Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 5
Vollständige Unterstützung 5
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android ?
insetChrome Vollständige Unterstützung 10
Vollständige Unterstützung 10
Vollständige Unterstützung 1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 4
Vollständige Unterstützung 4
Keine Unterstützung 3.5 — 13
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
IE Vollständige Unterstützung 9
Hinweise
Vollständige Unterstützung 9
Hinweise
Hinweise To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Opera Vollständige Unterstützung 10.5Safari Vollständige Unterstützung 5.1
Vollständige Unterstützung 5.1
Vollständige Unterstützung 5
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Vollständige Unterstützung Ja
Mit Präfix
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android ? Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 5
Vollständige Unterstützung 5
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android ?
Spread radiusChrome Vollständige Unterstützung 10
Vollständige Unterstützung 10
Vollständige Unterstützung 1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 4
Vollständige Unterstützung 4
Keine Unterstützung 3.5 — 13
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
IE Vollständige Unterstützung 9
Hinweise
Vollständige Unterstützung 9
Hinweise
Hinweise To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Opera Vollständige Unterstützung 10.5Safari Vollständige Unterstützung 5.1
Vollständige Unterstützung 5.1
Vollständige Unterstützung 5
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Vollständige Unterstützung Ja
Mit Präfix
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android ? Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 5
Vollständige Unterstützung 5
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Schlagwörter des Dokuments und Mitwirkende

Zuletzt aktualisiert von: SJW,