Box Shadow Generator

CSS Box-Shadow Syntax

box-shadow: h-offset v-offset blur spread color [inset];

Beispiel:
box-shadow: 10px 10px 20px 5px rgba(0,0,0,0.3);

Parameter erklärt

• h-offset: Horizontale Verschiebung (positiv = rechts)
• v-offset: Vertikale Verschiebung (positiv = unten)
• blur: Unschärfe-Radius (größer = weicher)
• spread: Ausbreitung (größer = größerer Schatten)
• color: Schattenfarbe (oft mit Transparenz)
• inset: Optional – innerer statt äußerer Schatten

Beliebte Schatten-Stile

Subtle Shadow

box-shadow: 0 1px 3px rgba(0,0,0,0.12),
            0 1px 2px rgba(0,0,0,0.24);

Material Design

box-shadow: 0 3px 6px rgba(0,0,0,0.16),
            0 3px 6px rgba(0,0,0,0.23);

Floating Effect

box-shadow: 0 14px 28px rgba(0,0,0,0.25),
            0 10px 10px rgba(0,0,0,0.22);

Neumorphismus

box-shadow: 20px 20px 60px #bebebe,
           -20px -20px 60px #ffffff;

Box-Shadow vs. Drop-Shadow

Mehrere Schatten

Für komplexe Effekte können Sie mehrere Schatten mit Komma trennen:

box-shadow: 
  0 2px 4px rgba(0,0,0,0.1),
  0 8px 16px rgba(0,0,0,0.1),
  0 16px 32px rgba(0,0,0,0.1);

Tipps für schöne Schatten

• Transparenz: rgba() mit 0.1-0.3 wirkt natürlicher
• Mehrere Schichten: Gestaffelte Schatten = realistischer
• Konsistenz: Lichtquelle im ganzen Design gleich
• Performance: Große blur-Werte kosten Ressourcen

Häufig gestellte Fragen

Wie mache ich einen Schatten nur unten?

Positiver v-offset, negativer spread: box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1). Der negative spread begrenzt den Schatten.

Warum wird mein Schatten abgeschnitten?

Wahrscheinlich overflow: hidden auf einem Eltern-Element. Der Schatten liegt außerhalb der Box und wird abgeschnitten.

Kann ich Schatten animieren?

Ja, aber es ist performance-intensiv. Besser: Einen Pseudo-Element mit Schatten erstellen und dessen Opacity animieren.