Schatten für Tiefenwirkung Hinzufügen

Box-Shadows können verwendet werden, um einen visuellen Effekt zu erzeugen, bei dem ein Element scheinbar über dem Hintergrund schwebt. Dieser Effekt kann Tiefe schaffen, bestimmte Elemente hervorheben und das visuelle Interesse einer Webseite steigern. Um dies zu erreichen, kann die Eigenschaft box-shadow angewendet werden.

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color;

• offset-x bezeichnet die horizontale Positionierung des Schattens; ein positiver Wert verschiebt den Schatten nach rechts, ein negativer Wert nach links;
• offset-y bezeichnet die vertikale Positionierung des Schattens; ein positiver Wert verschiebt den Schatten nach unten, ein negativer Wert nach oben;
• blur-radius legt den Grad der Unschärfe des Schattens fest und ist optional; ein höherer Wert erzeugt einen stärker verschwommenen Schatten;
• spread-radius ist ebenfalls optional und vergrößert oder verkleinert die Größe des Schattens abhängig von seinem positiven oder negativen Wert;
• color gibt die Farbe des Schattens in jedem gültigen Farbformat an und ist ebenfalls optional.

Zusätzlich zu box-shadow ermöglichen die Eigenschaften text-shadow und drop-shadow das Erstellen von Schatten für Text bzw. andere Elemente. Sie funktionieren auf die gleiche Weise wie die Eigenschaft box-shadow. Allerdings werden diese Eigenschaften im Vergleich zu box-shadow. seltener verwendet.