CSS box-shadow-Eigenschaft

Die box-shadow-Eigenschaft ermöglicht es, einem Element einen oder mehrere Schatten hinzuzufügen, indem Werte für horizontalen Versatz, vertikalen Versatz, Weichzeichnungsradius, Ausbreitungsradius, Farbe und das Schlüsselwort inset angegeben werden. Diese Seite erläutert jeden dieser Werte und zeigt anschließend, wie man sie für mehrere Schatten, innere (inset) Schatten, einseitige Schatten und gängige UI-Muster wie erhabene Karten kombiniert.

Die box-shadow-Eigenschaft ist eine der CSS3-Eigenschaften.

Effekte können durch Komma getrennt hinzugefügt werden. Wenn ein border-radius für das Element mit einem Box-Schatten festgelegt wird, übernimmt der Box-Schatten dieselben abgerundeten Ecken.

Dies sind zwei Werte, die den Schattenversatz festlegen. H-offset gibt den horizontalen Abstand an. Positive Werte platzieren den Schatten rechts vom Element, negative Werte links davon. V-offset gibt den vertikalen Abstand an. Ein positiver Wert platziert den Schatten unterhalb des Elements, ein negativer Wert darüber. Sind beide Werte 0, erscheint der Schatten direkt hinter dem Element.

Der dritte Wert ist der Weichzeichnungsradius. Er ist optional. Je höher die Zahl, desto größer und heller wird der Weichzeichner. Negative Werte sind ungültig. Wird er weggelassen oder auf 0 gesetzt, ist die Schattenkante scharf.

Der vierte Wert ist der Ausbreitungsradius. Er ist optional. Positive Werte bewirken, dass sich der Schatten ausdehnt, negative Werte lassen ihn schrumpfen. Wird er weggelassen oder auf 0 gesetzt, hat der Schatten dieselbe Größe wie das Element.

Der fünfte Wert ist die Farbe. Sie ist optional. Wird sie weggelassen, entspricht die Schattenfarbe der berechneten Textfarbe des Elements.

Der sechste Wert ist das Schlüsselwort inset. Es ist optional und kann an beliebiger Stelle in der Schattendefinition platziert werden. Wenn es vorhanden ist, wird ein innerer Schatten anstelle eines Schlagschattens erzeugt.

Ein feiner, aber wichtiger Hinweis: Die Schattenfarbe wird fast immer mit einem halbtransparenten Wert wie rgba(0, 0, 0, 0.2) statt einer Volltonfarbe angegeben. Ein halbtransparentes Schwarz mischt sich mit dem Hintergrund des Elements, sodass der Schatten auf jedem Hintergrund natürlich wirkt. Volltonfarben wie black oder gray wirken dagegen oft hart.

Anfangswert	none
Angewendet auf	Alle Elemente. Gilt auch für ::first-letter.
Vererbbar	Nein.
Animierbar	Ja. Der Box-Schatten ist animierbar.
Version	CSS3
DOM-Syntax	object.style.boxShadow = "15px 25px 35px gray";

Syntax

Syntax der CSS box-shadow-Eigenschaft

box-shadow: none | h-offset v-offset blur-radius spread-radius color inset;

Fügen wir einem Element Schatten hinzu.

Beispiel der box-shadow-Eigenschaft:

Beispiel der CSS box-shadow-Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 50px;
        background-color: #eee;
        box-shadow: 5px 4px 10px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Box-shadow example</h2>
    <div></div>
  </body>
</html>

Probier es selbst »

Ergebnis

Mehrere Schatten

Es besteht die Möglichkeit, die box-shadow-Eigenschaft mehrfach durch Komma zu trennen. Mit dem folgenden Code werden beispielsweise 3 Schatten mit unterschiedlichen Farben und Positionen auf demselben Element angezeigt.

Beispiel der Verwendung der box-shadow-Eigenschaft zum Hinzufügen mehrerer Schatten:

Beispiel der CSS box-shadow-Eigenschaft mit mehreren Werten

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 50%;
        height: 100px;
        border: 1px solid;
        padding: 10px;
        box-shadow: 5px 5px #1c87c9, 10px 10px #ccc, 15px 15px #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Multiple shadows with box-shadow.</h2>
    <div></div>
  </body>
</html>

Probier es selbst »

Ergebnis

Geben wir dem Element nun einen inset-Wert. Er fügt einen Schatten innerhalb des Rahmens hinzu.

Beispiel der box-shadow-Eigenschaft mit dem Wert "inset":

Beispiel der CSS box-shadow-Eigenschaft mit inset-Wert

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 50px;
        background-color: #eee;
        box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
      }
    </style>
  </head>
  <body>
    <h2>Box-shadow with inset value</h2>
    <div></div>
  </body>
</html>

Probier es selbst »

Ergebnis

Einseitiger Schatten

Um einen Schatten zu erzeugen, der nur auf einer Seite eines Elements erscheint, verwende einen negativen Ausbreitungsradiuswert.

CSS box-shadow-Eigenschaft

.shadow {
  box-shadow: 0 10px 8px -4px yellow;
}

Beispiel der box-shadow-Eigenschaft mit einem negativen Ausbreitungsradiuswert:

Beispiel der box-shadow-Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <style>
      .shadow {
        width: 100px;
        height: 100px;
        box-shadow: 0 10px 8px -4px yellow;
        background-color: #cccccc;
      }
    </style>
  </head>
  <body>
    <div class="shadow"></div>
  </body>
</html>

Probier es selbst »

Häufige Anwendungsfälle

Die häufigste Verwendung von box-shadow besteht darin, ein Element von der Seite abzuheben, sodass es als eigenständige Oberfläche wahrgenommen wird – Karten, Dropdown-Menüs, Modals und Schaltflächen setzen darauf. Ein weicher, halbtransparenter Schatten mit einem kleinen vertikalen Versatz wirkt wie eine sanfte Erhebung:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .card {
        width: 220px;
        padding: 20px;
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: box-shadow 0.2s ease;
      }
      .card:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
      }
    </style>
  </head>
  <body>
    <div class="card">Hover me to raise the card.</div>
  </body>
</html>

Da box-shadow animierbar ist, lässt sich durch die Kombination mit einer transition erreichen, dass das Element beim Hover scheinbar angehoben wird, wie oben gezeigt. Mehrere übereinander gestapelte Schatten in einem einzigen kommaseparierten Wert erzeugen weichere, realistischere Tiefe als ein einzelner schwerer Schatten:

.card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.07),
    0 2px 4px rgba(0, 0, 0, 0.07),
    0 4px 8px rgba(0, 0, 0, 0.07);
}

Einige wichtige Hinweise:

Schatten beeinflussen das Layout nicht. Ein box-shadow wird außerhalb des Box-Modells gezeichnet und verschiebt daher keine benachbarten Elemente und verändert auch nicht die Breite oder Höhe des Elements. Verwende margin, wenn du Platz dafür reservieren möchtest.
Abgerundete Ecken werden berücksichtigt. Wenn das Element einen border-radius hat, folgt der Schatten automatisch derselben Kurve.
Leistung. Sehr große Weichzeichnungsradien und viele gestapelte Schatten sind beim Neuzeichnen aufwendig, besonders bei Animationen. Halte Weichzeichnungswerte moderat und vermeide es, schwere Schatten auf großen Elementen zu animieren.

Werte

Wert	Beschreibung	Ausprobieren
none	Es wird kein Schatten angezeigt.	Ausprobieren »
h-offset	Erforderlich. Der horizontale Versatz des Schattens. Ein positiver Wert setzt den Schatten auf die rechte Seite des Elements, ein negativer Wert auf die linke Seite.	Ausprobieren »
v-offset	Erforderlich. Der vertikale Versatz des Schattens. Ein positiver Wert setzt den Schatten unterhalb des Elements, ein negativer Wert darüber.	Ausprobieren »
blur-radius	Optional. Der Schatten wird weichgezeichnet. Je höher die Zahl, desto stärker die Weichzeichnung. Negative Werte sind ungültig.	Ausprobieren »
spread-radius	Optional. Der Schatten wird ausgebreitet. Ein positiver Wert vergrößert den Schatten, ein negativer Wert verkleinert ihn.	Ausprobieren »
color	Optional. Die Farbe des Schattens. Wird sie weggelassen, entspricht sie der Textfarbe des Elements.	Ausprobieren »
inset	Optional. Ein optionales Schlüsselwort, das an beliebiger Stelle in der Schattendefinition platziert werden kann. Es wandelt einen äußeren Schatten in einen inneren Schatten um.	Ausprobieren »
initial	Setzt die Eigenschaft auf ihren Standardwert.	Ausprobieren »
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Welche Eigenschaften können beim Definieren eines box-shadow in CSS angepasst werden?