Box-Shadow-Generator

Schatten mit Live-Feedback gestalten

Ein gut abgestimmter box-shadow kann eine Oberfläche geschichtet, klickbar und hochwertig wirken lassen. Ein schlecht abgestimmter Schatten lässt dieselbe Oberfläche verwaschen oder uneinheitlich erscheinen. Dieser Generator bietet direkte Regler für die entscheidenden Werte: horizontaler Versatz, vertikaler Versatz, Unschärfe, Ausbreitung, Farbe, Deckkraft und Inset-Modus. Sobald Sie einen Regler bewegen, aktualisieren sich Vorschau und CSS-Ausgabe sofort – so finden Sie leichter ein natürliches Ergebnis, als wenn Sie Zahlen von Hand eintippen.

Die Ausgabe ist eine Standard-CSS-Deklaration und funktioniert daher für Karten, Modale, Buttons, Dropdowns, Navigationsleisten und jedes andere Element, das box-shadow akzeptiert. Es werden keine Bilder erzeugt und nichts wird hochgeladen. Der Browser wendet den Schatten lediglich auf das Vorschauelement an und kopiert das fertige CSS, sobald Sie bereit sind.

Versatz, Unschärfe und Ausbreitung verstehen

Horizontaler und vertikaler Versatz verschieben den Schatten vom Element weg. Ein positiver vertikaler Versatz deutet oft an, dass das Objekt über der Seite schwebt, während ein Schatten mit geringem Versatz eher wie ein Glühen wirkt. Die Unschärfe steuert die Weichheit: Geringe Unschärfe erzeugt eine harte, grafische Kante, höhere Unschärfe einen realistischeren, diffusen Schatten. Die Ausbreitung verändert die Größe des Schattens, bevor die Unschärfe angewendet wird. Positive Ausbreitung macht den Schatten breiter und schwerer; negative Ausbreitung zieht ihn zusammen, sodass die Unschärfe dezenter wirkt.

Schatten in einem Designsystem einsetzen

Schatten wirken am besten, wenn sie konsistent sind. Statt für jede Komponente einen neuen Schatten zu erfinden, legen Sie eine kleine Elevationsskala an: ein dezenter Schatten für Karten, ein stärkerer für Popovers und ein fokussierter für Modale. Testen Sie Schatten sowohl auf hellen als auch auf dunklen Flächen, denn dieselbe Deckkraft kann auf hellem Hintergrund zu stark und auf dunklem zu schwach wirken. Inset-Schatten eignen sich für gedrückte Zustände, eingelassene Eingabefelder und vertiefte Panels, sollten aber sparsam eingesetzt werden, damit Bedienelemente klar und barrierefrei bleiben.