Was ist box-shadow und wie baue ich einen schönen Karten-Schatten?
box-shadow ist eine CSS-Eigenschaft, die einen Schatten um ein Element legt. Du gibst ihr vier Zahlen (X-Versatz, Y-Versatz, Blur, Spread), eine Farbe und fertig ist der Schatten. In der Praxis ist es schwer, diese Zahlen aus dem Kopf zu erfinden, deshalb hilft es, das Ergebnis live zu sehen und mit Reglern zu spielen.
Hier wählst du ein Preset (Material-Elevation 1-5, Neumorphism, Brutalist) oder baust dein eigenes. Jedes Element kann mehrere Schatten als Layer stapeln (Liste rechts), das gibt dir die tiefere Apple-/Material-artige Tiefe.
Klick "Kopieren" und füg die fertige CSS-Regel in dein Stylesheet ein.
So nutzt du es
- Klick ein Preset aus der Galerie (Material 1-5, Neumorphism, Glow, Long Shadow), um mit einem funktionierenden Effekt zu starten.
- Rechts siehst du eine Layer-Liste. Klick einen Layer zum Bearbeiten. Der Plus-Button fügt einen neuen hinzu.
- Schieberegler: X und Y = Schattenversatz, Blur = wie weich die Kante ist, Spread = wie weit er sich ausdehnt. Farbe plus Alpha daneben.
- Schalte inset ein, um den Schatten nach innen zu legen (wirkt wie eine Vertiefung, in Neumorphism üblich).
- Kopiere die CSS-Regel und füg sie in dein Stylesheet oder den React-`style={{}}`-Prop ein.
Wann das hilft
Schatten sind das am meisten unterschätzte Detail, das eine UI von flach zu premium hebt. Drei Buchstaben des UI-Übels sind "flach ohne Tiefe":
- Produktkarten in einem Shop. Material Elevation 2-3 sieht aus wie direkt von Google, ohne Grafiken.
- Modal / Dialog. Stärkerer Schatten (Elevation 4-5) hebt das Modal von der Seite ab, gibt dir das Apple-Gefühl.
- Neumorphische Buttons. Zwei Schatten gleichzeitig, einer hell oben-links, einer dunkel unten-rechts, lässt den Button geprägt aussehen.
- Karten-Hover-Zustand. Kleiner Schatten in Ruhe, größer beim Hover, ein `transition: box-shadow 200ms` und du hast die klassische Mikro-Interaktion.
- Brutalist (hart, scharf, kein Blur). Ein schwarzer 8/8/0/0-Schatten trifft den Retro-Cool-Look.
- Glow / Neon. Ein 0/0/24/4-Schatten in einer kräftigen Farbe mit Alpha macht aus einem Call-to-Action-Button einen leuchtenden.
Um eine Schattenfarbe zu wählen, sieh den Farb-Konverter. Für Karten-Eckenrundung sieh den Border-Radius-Generator.