Box-Schattengenerator
Gestalten Sie Boxschatten visuell – Versätze, Unschärfe, Farbe, kopiert als CSS.
So verwenden Sie Box-Schattengenerator
- Legen Sie die Versätze fest – X normalerweise 0, Y positiv (Licht kommt von oben).
- Fügen Sie die Unschärfe großzügig und die Deckkraft sparsam hinzu – weich und schwach wirken echt.
- Passen Sie die Ausbreitung an nur, wenn der Schatten über den Umriss des Elements hinaus wachsen/schrumpfen muss.
- Kopieren Sie das CSS – und erwägen Sie die Schichtung eines zweiten, engeren Schattens Realismus.
Was ist Box-Schattengenerator?
Ein Box-Shadow-Generator verwandelt Schieberegler in box-shadow-CSS: horizontaler und vertikaler Versatz, Unschärferadius, Ausbreitung und Farbe/Deckkraft, Live-Vorschau – die vierwertige Syntax (box-shadow: 0 4px 12px rgba(0,0,0,0.15)), deren Zahlen niemand beim ersten Mal richtig errät.
Schatten zeigen, wie flache Benutzeroberflächen Tiefe ausdrücken: a Die Karte „schwebt“ genau so weit über der Seite, wie ihr Schatten vermuten lässt. Der Unterschied zwischen Amateur und poliert besteht fast immer in der Weichheit – echte Schatten sind stark verschwommen, haben eine geringe Deckkraft und sind leicht nach unten gerichtet; Harte, dunkle, kleine Unschärfeboxen schreien nach Standard.
Über den Box-Schattengenerator
Ziehen Sie die Schieberegler – X/Y-Versatz, Unschärfe, Ausbreitung, Farbe und Deckkraft – beobachten Sie live, wie der Schatten gerendert wird, und kopieren Sie das CSS, wenn es sich richtig anfühlt.
Rezepte, die immer funktionieren: Die subtile Kartenhöhe ist 0 2px 8px rgba(0,0,0,0.1); ein Hover-Lift paart einen größeren Schatten (0 8px 24px rgba(0,0,0,0.15)) mit einem winzigen TranslateY; Modal/Popover-Prominenz benötigt 0 16px 48px rgba(0,0,0,0.2). Die physikalische Intuition: höhere Höhe = größerer Y-Versatz + mehr Unschärfe + WENIGER Deckkraft – Licht breitet sich mit zunehmender Entfernung aus. Farbige Schatten (ein markenfarbenes Leuchten unter einer Schaltfläche) entstehen durch den Austausch des schwarzen RGBA gegen die Markenfarbe bei niedrigem Alpha.
Layering ist der Profi-Move, den die Syntax unterstützt: Zwei oder drei durch Kommas getrennte Schatten (einer eng und dunkel, einer groß und schwach) ahmen echtes Licht weitaus besser nach als jeder einzelne Schatten – die Erhebungen von Material Design sind genau auf diese Weise aufgebaut.