In diesem Artikel
Was ist CSS-Box-Shadow?
Die CSS-Eigenschaft box-shadow fügt Schatteneffekte rund um den Rahmen eines Elements hinzu. Sie zählt zu den am häufigsten genutzten CSS-Eigenschaften, um im Webdesign Tiefe und visuelle Hierarchie zu erzeugen. Eine einzelne box-shadow-Deklaration kann horizontale und vertikale Versätze, einen Weichzeichnungsradius (Blur), einen Streuradius (Spread) und eine Farbe umfassen.
Box-Schatten lassen sich schichten — du kannst mehrere Schatten auf ein einzelnes Element anwenden, indem du sie durch Kommas trennst. Diese Technik ermöglicht anspruchsvolle Effekte wie realistische Tiefe, leuchtende Ränder und neumorphe Designs. Das Schlüsselwort inset klappt den Schatten in das Element hinein, um gedrückte oder eingelassene Effekte zu erzeugen.
So funktioniert unser Generator
Der Box-Shadow-Generator von CheckTown bietet eine visuelle Oberfläche zum Gestalten von CSS-Box-Schatten. Passe die Schieberegler an, sieh das Ergebnis in Echtzeit und kopiere das CSS, sobald du mit dem Effekt zufrieden bist.
- Passe X-Versatz, Y-Versatz, Weichzeichnungsradius und Streuradius mit intuitiven Schiebereglern an
- Wähle die Schattenfarbe mit Deckkraftregelung, schalte den Inset-Modus um und schichte mehrere Schatten
- Starte mit Vorlagen wie Subtle, Medium, Large oder Glow — und passe sie dann an dein Design an
Kostenlos testen – keine Registrierung erforderlich
Box-Shadow erstellen →Wann Box-Schatten sinnvoll sind
Box-Schatten sind unverzichtbar, um in modernen Weboberflächen Tiefe und visuelle Hierarchie zu erzeugen. Sie lenken den Blick des Nutzers und signalisieren Interaktivität.
- Erhöhung von Karten und Panels — dezente Schatten heben Karten vom Hintergrund ab und erzeugen eine geschichtete Oberfläche
- Button-Zustände — füge beim Hover Schatten hinzu oder verstärke sie, um Interaktivität anzuzeigen und haptisches Feedback zu geben
- Modal- und Dropdown-Overlays — kräftige Schatten trennen schwebende Elemente von der darunterliegenden Seite
Häufig gestellte Fragen
Beeinflusst box-shadow das Layout oder die Performance?
Box-Schatten beeinflussen das Layout nicht — sie sind rein visuell und verändern weder Größe noch Position des Elements im Dokumentfluss. Die Performance ist in modernen Browsern in der Regel ausgezeichnet, doch sehr große Weichzeichnungsradien oder viele geschichtete Schatten auf häufig neu gezeichneten Elementen können die Rendering-Geschwindigkeit beeinträchtigen.
Kann ich box-shadow animieren?
Ja, box-shadow lässt sich mit CSS-Transitions und Keyframes animieren. Allerdings löst das Animieren von box-shadow ein Neuzeichnen (Repaint) aus, was aufwendig sein kann. Für flüssigere Performance solltest du in Betracht ziehen, stattdessen die opacity eines Pseudo-Elements mit festem Schatten zu animieren, anstatt die Schattenwerte selbst zu überblenden.
Was ist der Unterschied zwischen box-shadow und drop-shadow?
box-shadow legt einen rechteckigen Schatten auf den Kasten des Elements (einschließlich seines border-radius). filter: drop-shadow() erzeugt einen Schatten, der der tatsächlichen Form des Elements folgt, einschließlich transparenter Bereiche in Bildern. Verwende box-shadow für UI-Elemente und drop-shadow für Bilder mit Transparenz.