box-shadow

Die CSS-Eigenschaft box-shadow dient dazu, Schatten auf Elemente zu legen (manchmal auch als „Drop Shadows“ bezeichnet, wie in Photoshop/Figma).

.card {
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}

Die Syntax dafür ist

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

1. Der horizontale Versatz (erforderlich) des Schattens. Ein positiver Wert bedeutet, dass der Schatten rechts von der Box liegt, ein negativer Wert platziert den Schatten links von der Box.
2. Der vertikale Versatz (erforderlich) des Schattens. Ein negativer Wert bedeutet, dass der Schatten oberhalb der Box liegt, ein positiver Wert platziert den Schatten unterhalb der Box.
3. Der Weichzeichnungsradius (erforderlich). Wenn dieser auf 0 gesetzt ist, ist der Schatten scharf. Je höher die Zahl, desto weicher wird der Schatten und desto weiter erstreckt er sich nach außen. Zum Beispiel hat ein Schatten mit 5 Pixeln horizontalem Versatz, der auch einen Weichzeichnungsradius von 5 Pixeln hat, insgesamt 10 Pixel Schattenausdehnung.
4. Der Streckradius (optional). Positive Werte vergrößern die Größe des Schattens, negative Werte verringern sie. Standard ist 0 (der Schatten hat die gleiche Größe wie der Weichzeichnungsradius).
5. Farbe (erforderlich) – Akzeptiert jeden Farbwert, wie Hex, benannte Farben, rgba oder hsla. Wenn der Farbwert weggelassen wird, werden Box-Schatten in der Vordergrundfarbe (Textfarbe color) gezeichnet. Aber Vorsicht: Ältere WebKit-Browser (vor Chrome 20 und Safari 6) ignorieren die Regel, wenn die Farbe weggelassen wird.

Die Verwendung einer halbtransparenten Farbe wie rgba(0, 0, 0, 0.4) ist am gebräuchlichsten und ein schöner Effekt, da sie das, worüber sie liegt, nicht vollständig/opak abdeckt, sondern ein wenig durchscheinen lässt, wie ein echter Schatten.

Beispiele

Innerer Schatten

Sie verwenden das Schlüsselwort inset

.shadow {
   box-shadow: inset 0 0 10px #000000;
}

Antike Geschichte

Hier ist ein Auszug mit Vendor-Präfixen, der eine möglichst einfache Browserunterstützung ermöglicht

.shadow {
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow:         3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

Sie können sogar einen Box-Schatten in IE 8 zum Laufen bringen. Dazu benötigen Sie ein zusätzliches Element, aber mit filter ist es machbar.

<div class="shadow1">
  <div class="content">Box-shadowed element</div>
</div>

.shadow1 {
  margin: 40px;
  background-color: rgb(68,68,68); /* Needed for IEs */

  -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
  -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
  box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);

  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
  -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
  zoom: 1;
}
.shadow1 .content {
  position: relative; /* This protects the inner element from being blurred */
  padding: 100px;
  background-color: #DDD;
}

Nur eine Seite

Durch die Verwendung eines negativen Streckradius können Sie einen Box-Schatten komprimieren und ihn nur von einer Kante einer Box abstehen lassen.

.one-edge-shadow {
  box-shadow: 0 8px 6px -6px black;
}

Mehrere Ränder & mehr

Sie können Box-Schatten mit Kommas trennen, so oft Sie möchten. Dieses Beispiel zeigt beispielsweise zwei Schatten mit unterschiedlichen Positionen und Farben auf demselben Element

box-shadow: 
  inset 5px 5px 10px #000000, 
  inset -5px -5px 10px blue;

Das Beispiel zeigt, wie Sie dies zur Erstellung mehrerer Ränder verwenden können

Durch das Anwenden der Schatten auf Pseudoelemente, die Sie dann manipulieren, können Sie ziemlich ausgefallene 3D-ähnliche Box-Schatten erzeugen

Super glatte Schatten durch mehrere komma-getrennte Werte

Vergleich mit filter: drop-shadow()

Sie können ähnliche Dinge tun! Aber auch, warten Sie, unterschiedliche Dinge. Hier ist ein ausführlicher Artikel dazu. Das Wichtigste, was man vielleicht wissen muss, ist, dass ein filter stärker an die Kanten eines Elements schmiegt als ein rechteckiger box-shadow (obwohl box-shadow abgerundete Ecken berücksichtigt).

Browser-Unterstützung

Weitere Informationen

• CSS Backgrounds and Borders Module Level 3
• Mozilla Docs
• CSS-Tipp: Mehrfarbige & ausgeschnittene Drop Shadows (DigitalOcean)