Box-Shadow Generator
Live-konfigurierbare CSS-Box-Shadows mit Multi-Layer-Support.
Layer
Vorschau
box-shadow: 0px 12px 24px -4px rgba(0, 0, 0, 0.25);
So funktioniert das Tool
CSS-Box-Shadows können viel mehr als der „shadow-md”-Tailwind-Utility - mehrere Layer übereinander, scharfe und weiche Kanten, farbige Inner-Shadows. Unser Generator lässt dich Layer für Layer aufbauen: X-Offset, Y-Offset, Blur-Radius, Spread, Farbe, Inset. Live-Preview zeigt jeden Schritt. Output ist die fertige box-shadow-CSS-Property, ready zum Einfügen.
Typische Anwendungsfälle
Materielle Card-Schatten
Realistischer Schatten unter einer Card: 2-3 Layer von leicht (1 px Blur) bis weich (16 px Blur), abnehmende Opacity - das ist der Trick hinter Material-Design-Schatten.
Inset-Schatten für Inputs
Ein dezenter Innen-Schatten am oberen Rand eines Form-Felds suggeriert Tiefe - typisch in iOS-style Eingabefeldern.
Neumorphism-Effekte
Zwei Box-Shadows (hell oben-links, dunkel unten-rechts) erzeugen den 3D-ähnlichen „aus der Oberfläche herausgehoben”-Look.
Glow / Ambient Light
Großer Blur, geringe Spread, farbiger Shadow (z. B. Brand-Farbe mit niedrigem Alpha) - perfekt für Hover-Highlights auf dunklen UIs.
FAQ
Häufige Fragen
Was bedeuten die fünf Werte einer box-shadow?
X-Offset (horizontale Verschiebung, positiv = rechts), Y-Offset (vertikal, positiv = unten), Blur (Weichheit, je höher desto verwaschener), Spread (zusätzliche Größe vor Blur), Color. Optional inset davor - der Schatten ist dann innerhalb der Box statt außen.
Wie viele Layer sind sinnvoll?
1 Layer für simple Schatten, 2-3 für realistische Materialien (heller Streulicht-Layer + scharfer Kontakt-Layer + weicher Ambient-Layer). Mehr als 5 Layer wird selten besser, kostet aber Compositor-Performance bei Animationen.
Was ist der Unterschied zwischen Blur und Spread?
Blur (3. Wert) macht die Schattenkante weicher, ohne den Schatten größer zu machen - Gaussian-Blur-artig. Spread (4. Wert) macht den Schatten zusätzlich größer (oder kleiner mit Negativwerten), bevor der Blur appliziert wird. Spread ist nützlich für gleichmäßige Glow-Effekte ohne starken Blur.
Kosten Schatten Performance?
Bei statischen Schatten kaum. Bei animierten box-shadow (z. B. Hover-Effekt) ja - das Layout muss gegebenenfalls neu zusammengesetzt werden. Performance-Tipp: animiere stattdessen die opacity eines absolut positionierten Pseudo-Elements mit fertiger box-shadow.
Wie wirken Schatten auf einem dunklen Hintergrund?
Schwarz auf Dunkelgrau ist meist unsichtbar. Auf Dark-Mode-UIs braucht man stattdessen helle Schatten (z. B. weiß mit 10 % Alpha) oder farbige Glow-Effekte. Inset-Schatten in einer dunklen Farbe ergeben Tiefe ohne den Kontrast-Wechsel.
Verwandte Tools
Alle Daten bleiben in deinem Browser. Kein Server, kein Tracking.