Anleitung zum Hinzufügen eines Schattens zu einem Element

Hinzufügen von Box-Schatten

Schatten sind ein häufiges Designelement, das dazu beitragen kann, Elemente auf Ihrer Seite hervorzuheben. In CSS werden Schatten auf den Kästen von Elementen mithilfe der box-shadow-Eigenschaft erstellt (wenn Sie einen Schatten zum Text selbst hinzufügen möchten, benötigen Sie text-shadow).

Die box-shadow-Eigenschaft nimmt eine Reihe von Werten an:

• Den Versatz auf der x-Achse
• Den Versatz auf der y-Achse
• Einen Unschärferadius
• Einen Ausbreitungsradius
• Eine Farbe
• Das inset-Schlüsselwort

Im folgenden Beispiel haben wir die X- und Y-Achsen auf 5px, die Unschärfe auf 10px und die Ausbreitung auf 2px gesetzt. Ich verwende ein halbtransparentes Schwarz als Farbe. Experimentieren Sie mit den verschiedenen Werten, um zu sehen, wie sie den Schatten verändern.

<div class="wrapper">
  <button class="shadow">box-shadow</button>
</div>

.wrapper {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  padding: 5px 10px;
  border: 0;
  border-radius: 5px;
  font-weight: bold;
  font-size: 140%;
  background-color: #db1f48;
  color: white;
}

.shadow {
  box-shadow: 5px 5px 10px 2px rgb(0 0 0 / 0.8);
}

Siehe auch

• Der Box-Schatten-Generator
• Learn CSS: Fortgeschrittene Stileffekte