🔳 Box-Shadow Generator

Gestalte Schatten für deine UI-Elemente und kopiere den Code sofort.

Einstellungen

Horizontaler Versatz10px

Vertikaler Versatz10px

Unschärfe (Blur)20px

Spreizung (Spread)0px

Deckkraft (Opacity)0.4

Schatten-Farbe

Box-Farbe

Hintergrund

CSS Code

box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.4);

💡 Profi-Tipp

Schatten sehen natürlicher aus, wenn sie eine geringe Deckkraft (Opacity) haben und der Versatz in die Richtung der (imaginären) Lichtquelle passt. "Inset" Schatten eignen sich hervorragend für Buttons, die eingedrückt wirken sollen.