CSS Box Shadow Generator

Die <code>box-shadow</code>-Eigenschaft fügt Schatteneffekte rund um den Rahmen eines Elements hinzu. Sie akzeptiert fünf Werte: optionales <code>inset</code>-Schlüsselwort, horizontaler Versatz, vertikaler Versatz, optionaler Unschärferadius, optionaler Ausbreitungsradius und Farbe. Mehrere Schatten können durch Komma getrennt gestapelt werden. box-shadow wird seit IE9 (2011) von jedem gängigen Browser unterstützt und ist damit in modernen Projekten ohne Fallbacks verwendbar.

Ja. CSS <code>box-shadow</code> akzeptiert eine durch Komma getrennte Liste von Schattenwerten: <code>box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);</code>. Schatten werden von hinten nach vorne gerendert - der erste in der Liste liegt oben. Das Schichten von 2-3 Schatten mit leicht unterschiedlichen Unschärfen und Opazitäten erzeugt eine weitaus realistischere Tiefe als ein einzelner großer Schatten, weil reale Objekte sowohl diffuse Umgebungsschatten als auch einen engeren direktionalen werfen.

Das <code>inset</code>-Schlüsselwort verschiebt den Schatten nach innen statt nach außen. Das visuelle Ergebnis ist ein innerer Schatten, als wäre das Element in die Seite eingelassen. Übliche Anwendungen sind gedrückte-Schaltflächen-Zustände, Texteingabefelder und dekorative Gruben oder Rillen. Du kannst inset- und äußere Schatten in derselben Mehrfach-Schatten-Deklaration mischen - zum Beispiel ein subtiler inset für Tiefe plus ein äußerer Schatten für Elevation.

Ausbreitung ist der vierte numerische Wert und steuert, wie stark der Schatten expandiert (positiv) oder schrumpft (negativ), bevor die Unschärfe angewendet wird. Mit einer Ausbreitung von 0 entspricht der Schatten der Boxgröße des Elements. Eine Ausbreitung von 4px vergrößert den Schatten um 4px auf jeder Seite, der dann unscharf wird. Negative Ausbreitung ist nützlich, um einen Schatten zu erzeugen, der "von unten" zu kommen scheint, ohne aus den Seiten herauszuragen.

Beide erzeugen Schatteneffekte, aber <code>box-shadow</code> folgt dem rechteckigen Border-Box des Elements, selbst wenn es abgerundete Ecken oder einen transparenten Hintergrund hat. <code>filter: drop-shadow()</code> folgt der tatsächlichen Alpha-Form - unverzichtbar für SVG-Icons, PNG- Bilder mit Transparenz oder alles Nicht-Rechteckige. drop-shadow ist etwas aufwändiger zu rendern, liefert aber korrekte Ergebnisse bei unregelmäßigen Formen. Verwende box-shadow für Karten und Schaltflächen; drop-shadow für Logos und Icons.

Neumorphismus ("neuer Skeuomorphismus") verwendet zwei gegensätzliche Schatten - einen dunklen, einen hellen -, um Elemente weich aus einem mitteltönigen Hintergrund heraus zu prägen: <code>box-shadow: 8px 8px 16px #c8c8c8, -8px -8px 16px #ffffff;</code>. Die Technik funktioniert nur auf nicht-weißen Hintergründen, weil sowohl das "Highlight" als auch der "Schatten" einen Kontrast brauchen. Sparsam einsetzen: Neumorphe Benutzeroberflächen scheitern oft an WCAG-Kontrastanforderungen und sind schwer schnell zu erfassen.

Material Design definiert eine Leiter von Elevation-Ebenen in dichteunabhängigen Pixeln: 0dp (flach), 1dp (Schalter), 2dp (Karten im Ruhezustand), 4dp (App-Leiste), 6dp (FAB im Ruhezustand), 8dp (Bottom Sheet), 12dp (FAB gedrückt), 16dp (Nav Drawer) und 24dp (Dialog). Jede Ebene hat ein vorgeschriebenes Umbra- (scharf) und Penumbra- (weich) Schattenpaar. Standard-Elevationen halten eine Benutzeroberfläche visuell konsistent und signalisieren dem Benutzer eine stabile Hierarchie.

box-shadow wird in modernen Browsern meist GPU-beschleunigt, aber große Unschärferadien oder Hunderte von schattierten Elementen auf dem Bildschirm können Paint und Compositing verlangsamen, besonders auf Mobilgeräten. Das direkte Animieren von box-shadow löst Repaints aus. Für Hover/Fokus- Übergänge animiere stattdessen <code>transform</code> (Skalierung oder Verschiebung) mit vorberechneten Schattenklassen, oder überblende zwischen zwei absolut positionierten Pseudo-Elementen mit statischem Schatten - beide Tricks umgehen Repaints.

Sie beschreiben dasselbe Werkzeug. "CSS-Schatten-Maker", "Schatten- Generator", "Box-Shadow-Generator" und "CSS-Box-Shadow-Generator" sind alle gängige Suchanfragen für ein Werkzeug, das die <code>box-shadow</code>-Deklaration für dich schreibt. Diese Seite deckt jede Variante ab: Versätze, Unschärfe, Ausbreitung und Farbe visuell einstellen, mehrere Ebenen stapeln, Inset umschalten und das resultierende Schatten-CSS in dein Stylesheet kopieren.

Der Abschnitt "CSS-Box-Shadow-Beispiele nach Elevation" oben listet produktionsreife Snippets für Tailwind shadow-sm bis shadow-2xl, Material Design Elevation 4 und einen weichen Inner-Shadow-Trick auf. Jedes Beispiel ist mit einem Klick einfügbar. Für Flächen kombiniere den Schatten mit einem sanften Hintergrundverlauf aus dem <a href="/de/tools/gradient-generator/">CSS-Farbverlauf-Generator</a>.

Tailwind liefert fünf Standard-Schatten-Skalen (sm, default, md, lg, xl, 2xl), die jeweils zwei Ebenen kombinieren - einen engen direktionalen und einen weichen Umgebungsschatten. Material Design definiert eine 24-Stufen- Leiter (0-24dp) mit drei Ebenen (Umbra, Penumbra, Ambient). Tailwind deckt rund 95 Prozent der UI-Anforderungen ab und ist einfacher zu überschreiben; Material ist physikalisch realistischer, aber aufwändiger. Für ein markenunabhängiges SaaS-UI, mit Tailwind-Standards beginnen und nur auf Material zurückgreifen, wenn eine echte Elevation-Hierarchie benötigt wird.