CSS Box Shadow

Wird verwendet, um Schatten auf Blockelemente (wie divs) zu werfen.

.shadow {
  box-shadow: 3px 3px 5px 6px #ccc;
}

1. Der horizontale Versatz des Schattens, positiv bedeutet, dass der Schatten rechts von der Box liegt, ein negativer Versatz platziert den Schatten links von der Box.
2. Der vertikale Versatz des Schattens, ein negativer Versatz bedeutet, dass der Box-Schatten über der Box liegt, ein positiver Versatz bedeutet, dass der Schatten unter der Box liegt.
3. Der Weichzeichnungsradius (optional), wenn auf 0 gesetzt, ist der Schatten scharf, je höher die Zahl, desto stärker ist er verwischt.
4. Der Streuradius (optional), positive Werte erhöhen die Größe des Schattens, negative Werte verringern die Größe. Standard ist 0 (der Schatten hat die gleiche Größe wie die Unschärfe).
5. Farbe

Beispiel

Innerer Schatten

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

Beispiel

Nur eine Seite

Mit einem negativen Streuradius können Sie einen Box-Schatten einklemmen und ihn nur an einer Kante einer Box hervorheben.

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

Browser-Unterstützung

Internet Explorer Box Shadow

Sie benötigen zusätzliche Elemente…

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

.shadow1 {
  margin: 40px;
  background-color: rgb(68,68,68); /* Needed for IE */
  box-shadow: 5px 5px 5px rgb(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;
}

Weitere Informationen

• CSS Backgrounds and Borders Module Level 3 Spezifikation (W3C)
• CSS Tipp: Mehrfarbige & ausgeschnittene Schlagschatten (DigitalOcean)

Verwandte Tricks!