Wissensdatenbank & Anleitung
CSS-Box-Schatten: Tiefe, Höhe und Neumorphismus
Mit der Eigenschaft CSS box-shadow können Frontend-Entwickler dynamische Schlagschatten aus dem Rahmen eines beliebigen HTML-Elements werfen. Dabei handelt es sich um die primäre Technik zum Einrichten einer visuellen Hierarchie, schwebender Karten und moderner UI-Erhöhung.
Das manuelle Schreiben komplexer Ebenenschatten erfordert langwieriges Ausprobieren. Mit diesem visuellen Generator können Sie Lichtquellen, Unschärferadien und Alpha-Transparenzkanäle manipulieren und den genauen CSS-Code sofort und vollständig clientseitig ausgeben.
Formel & Berechnungsmethode
box-shadow: [X-Offset] [Y-Offset] [Blur-Radius] [Spread-Radius] [Farbe] [Inset]
Sie können mehrere Schatten auf einem einzelnen Element stapeln, indem Sie sie durch Kommas trennen. Dies ist für die Erstellung einer hyperrealistischen, diffusen Umgebungsbeleuchtung unerlässlich.
Best Practices & Tipps
- Mehrere subtile Schatten überlagern: Ein einzelner harter schwarzer Schatten sieht billig und veraltet aus. Professionelles UI-Design verwendet einen dichten, dunklen Schatten für unmittelbare Tiefe, kombiniert mit einem großen, hochtransparenten Schatten für die Streuung des Umgebungslichts.
- Verwenden Sie RGBA für Transparenz: Verwenden Sie niemals einfarbige Hex-Farben für Schatten. Verwenden Sie immer RGBA oder HSLA mit einem sehr niedrigen Alphakanal (z. B. 0,05 bis 0,15), damit der Schatten realistisch mit der Hintergrundfarbe dahinter verschmilzt.
- Entsprechen Sie der Beleuchtung der realen Welt: In der realen Welt kommt das Licht normalerweise von oben. Daher sollte Ihr Y-Versatz fast immer positiv sein (wodurch der Schatten nach unten gedrückt wird), während der X-Versatz nahe Null bleibt.
Häufig gestellte Fragen
Was bewirkt der Spread-Radius?
Der Ausbreitungsradius vergrößert oder verkleinert den physischen Fußabdruck des Schattens, bevor die Unschärfe angewendet wird. Eine positive Ausbreitung macht den Schatten größer als das Element, während eine negative Ausbreitung ihn nach innen zieht (ideal für schwebende Elemente).
Wie erzeuge ich einen inneren Schatten?
Hängen Sie das Schlüsselwort „inset“ an das Ende der CSS-Regel an. Dadurch wird der Schatten umgekehrt, sodass er innerhalb des Begrenzungsrahmens gerendert wird und ein eingerückter, geprägter oder „eingedrückter“ neumorphischer Effekt entsteht.
Verursachen Boxschatten Leistungsprobleme?
Ja. Das Animieren von Boxschatten (wie ein Hover-Effekt) zwingt den Browser dazu, die Pixel ständig neu zu zeichnen, was auf billigen Mobilgeräten zu Verzögerungen führen kann. Es ist oft leistungsfähiger, die „Deckkraft“ eines Pseudoelements zu animieren, das den Schatten enthält.