CSS-Box-Shadow-Generator 2026

So funktioniert der Box-Shadow-Generator

Der Generator setzt aus Ihren Slider-Werten einen gültigen CSS-box-shadow-String zusammen. Die Reihenfolge der Werte ist standardisiert: optionales inset, dann X- und Y-Offset, gefolgt von Blur-Radius und Spread, abgeschlossen mit der Farbe in RGBA-Notation für die Deckkraft.

Die Live-Vorschau zeigt den Schatten an einer kleinen weißen Box auf grauem Hintergrund – die typische Inspektion, wie der Schatten in einer realen UI wirken würde. Beim Klick auf 'CSS kopieren' landet der Wert in der Zwischenablage und kann sofort in Ihr Stylesheet eingefügt werden.

CSS-Spezifikation

box-shadow ist im CSS Backgrounds and Borders Module Level 3 definiert (W3C). Die Eigenschaft wird seit allen modernen Browsern (Chrome, Firefox, Safari, Edge) seit über einem Jahrzehnt unterstützt. Auch Internet Explorer 9+ konnte sie bereits.

Mehrere Schatten werden komma-separiert angegeben und übereinander gestapelt – die zuerst genannten Schatten erscheinen vor den späteren. Diese Stack-Technik ist die Basis für realistische Tiefeneffekte wie in Material Design Elevation.

Anwendungsfälle

Karten: Cards in Dashboards, Blog-Listen und Produkt-Grids profitieren von dezenten Schatten.
Buttons: Schatten geben Klickbarkeit, Hover-States verstärken die Tiefe.
Modals/Popovers: Starke Schatten heben Overlay-Inhalte vom Hintergrund ab.
Eingabefelder: Innenschatten (inset) erzeugen den Eindruck einer Vertiefung.
Glow-Effekte: Spread mit farbigem Schatten ohne Offset für Highlight-States.

Datenschutz: Client-Side

Der Generator läuft komplett im Browser. Es werden keine Werte an einen Server gesendet, keine Cookies gesetzt, keine externen Dienste durchgeführt. Die Clipboard-API ist nativ im Browser verankert und kommuniziert nicht nach außen.

Nutzung erfüllt damit die DSGVO ohne weitere Maßnahmen, da keine personenbezogenen Daten verarbeitet werden.

Typische Fehler

Zu starker Schatten: Mehr als 30 % Deckkraft wirkt schmuddelig – die meisten Profi-UIs nutzen 5–15 %.
Falsche Richtung: Negative Y-Offsets wirken physikalisch falsch (Licht von unten). Ausnahme: Hover-Lift bei Buttons.
Reines Schwarz: Wirkt oft schmutzig. Leicht blau-grau (Slate-500 mit Alpha) wirkt edler.
Schatten bei Print: Auf Papier funktionieren Schatten kaum und kosten Toner. Mit @media print: box-shadow: none ausschalten.
Animierter Schatten: Direktes Animieren des Blur-Werts ist teuer. Lieber zwei Pseudo-Elemente per opacity überblenden.

Häufige Fragen

box-shadow erzeugt einen Schatten um ein HTML-Element. Die Eigenschaft akzeptiert horizontalen und vertikalen Versatz, Weichzeichnungsradius (Blur), Spread (Ausweitung) und Farbe. Optional kann inset einen inneren Schatten erzeugen. Mehrere Schatten werden komma-separiert gestapelt – ideal für realistische Tiefeneffekte.

Offset-X verschiebt den Schatten horizontal (positiv: rechts, negativ: links). Offset-Y vertikal (positiv: unten, negativ: oben). Blur-Radius weicht die Schattenkanten weich – höhere Werte erzeugen sanftere Übergänge. Spread vergrößert (positiv) oder verkleinert (negativ) den Schatten gleichmäßig. Farbe und Deckkraft bestimmen die Intensität.

box-shadow folgt dem rechteckigen Box-Modell des Elements – auch wenn das Element via border-radius rund ist, folgt der Schatten der gerundeten Kante. drop-shadow (CSS-Filter) folgt der tatsächlichen sichtbaren Form, also auch transparenten Bereichen in PNGs oder SVGs. Für Bilder mit Transparenz nutzt man drop-shadow, für UI-Elemente meist box-shadow.

Realismus entsteht durch zwei oder drei gestapelte Schatten: ein scharfer kleiner Schatten direkt unter dem Element für Kontaktpunkt, plus ein größerer weicher für die Streuung. Material Design nutzt diese Doppel-Technik systematisch in seinen Elevation-Stufen. Sehr gängig: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06).

inset macht aus dem Schatten einen Innenschatten – wirkt wie eine Vertiefung. Nützlich für Eingabefelder, gedrückte Buttons, Karten mit eingelassenem Bereich. Inset und outer Schatten lassen sich kombinieren, indem man beide komma-separiert anhängt.

Schatten werden bei jedem Repaint neu gerendert. Bei statischen Schatten ist das vernachlässigbar. Bei animierten Schatten (z. B. Hover) kann es zu Stottern kommen – moderne Browser optimieren via GPU. Beste Praxis: Animationen lieber mit transform: scale + opacity statt direktem Schatten-Resize.

Reines Schwarz wirkt oft hart und dreckig. Profis nutzen leicht getönte Schatten (etwa rgba(15, 23, 42, 0.1) – Slate-Blau). Bei farbigen Elementen einen Schatten in der gleichen Farbfamilie wählen, das wirkt natürlicher. Für Dark Mode oft kein Schatten oder ein hellerer Glow nötig.

Für UI-Elemente reichen meist ein bis drei Schatten. Mehr verlangsamt das Rendering und wirkt überladen. Material Design definiert 24 Elevation-Stufen, die jeweils mit zwei oder drei Schatten gebaut sind. Tailwind hat 7 Voreinstellungen (shadow-sm bis shadow-2xl) – ein guter Ausgangspunkt.

Ja, seit über zehn Jahren universell unterstützt. Auch IE11 kann es (ohne inset-Animationen). Für Print-Stylesheets sollten Schatten meist deaktiviert werden, da sie auf Papier nicht sinnvoll sind und Toner verbrauchen.