> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Box Shadow für Tiefe und Gestaltung nutzen

> Fügen Sie Schlagschatten hinzu, um Tiefe zu erzeugen, Elemente hervorzuheben und die visuelle Hierarchie Ihres Landingpage-Designs zu stärken.

Box Shadow verleiht Ihren Elementen Tiefe, indem ein Schatteneffekt um sie herum erzeugt wird. Elemente treten dadurch stärker hervor und Ihr Design wirkt moderner und mehrschichtiger.

### So funktioniert es

Ein Schatten setzt sich aus mehreren Einstellungen zusammen, die sein Aussehen und Verhalten steuern.

***

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/Cnvtc1TpBSCIUd3d/images/image-16.png?fit=max&auto=format&n=Cnvtc1TpBSCIUd3d&q=85&s=4fa841d790f27152d6791691abfbb96e" alt="Image" width="586" height="366" data-path="images/image-16.png" />
</Frame>

## Schatten-Einstellungen

### Preset

* Wendet schnell einen fertigen Schattenstil an (z. B. Small, Medium, Large)
* Ideal für schnelles und einheitliches Design

***

### Type

* **Outer Shadow** → erscheint außerhalb des Elements (am häufigsten)
* **Inner Shadow** → erscheint innerhalb des Elements

***

### Size (X & Y)

* Steuert die Position des Schattens
* **X (horizontal)** → verschiebt nach links oder rechts
* **Y (vertikal)** → verschiebt nach oben oder unten

👉 Beispiel:

* X: 0, Y: 4 → der Schatten liegt leicht unterhalb des Elements

***

### Blur

* Steuert, wie weich der Schatten ist

👉 Höherer Wert = weicherer Schatten<br />👉 Niedrigerer Wert = schärferer Schatten

***

### Spread

* Steuert, wie weit sich der Schatten ausbreitet

👉 Positiv = größerer Schatten<br />👉 Negativ = engerer Schatten

***

### Color

* Legt die Schattenfarbe fest (meist Schwarz oder Grau mit Transparenz)

👉 Üblich: `rgba(0, 0, 0, 0.1–0.3)` für weiche Schatten

***

## Mehrere Schatten

* Über **+ Add** stapeln Sie mehrere Schatten
* Nützlich für anspruchsvollere oder mehrschichtige Effekte