Welches CSS brauche ich für einen weichen, modernen Box-Shadow?.

Ein moderner Schatten soll Abstand andeuten, nicht auffallen. Üblich sind ein kleiner vertikaler Versatz, großzügige Unschärfe, wenig Ausdehnung und eine dunkle Farbe mit geringer Deckkraft.

box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

Die ersten beiden Werte bestimmen den Versatz. Die Unschärfe macht den Rand weich. Die Ausdehnung vergrößert oder verkleinert den Schatten vor dem Weichzeichnen; bei Karten bleibt sie meist nahe null.

Häufige Fehler vermeiden

Ein harter schwarzer Schatten kann eine klare Oberfläche altmodisch wirken lassen. Zu viel Unschärfe lässt Karten zu weit schweben. Ein Modal verdient mehr Erhebung als eine normale Karte.

Mit dem Schatten-Generator können Sie Werte visuell anpassen und CSS kopieren. Prüfen Sie das Ergebnis auf dem echten Hintergrund und mobil.