Skip to main content
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.
Image

​
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
👉 Niedrigerer Wert = schärferer Schatten

​
Spread

  • Steuert, wie weit sich der Schatten ausbreitet
👉 Positiv = größerer Schatten
👉 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