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
Verwandte Tools
Alle Daten bleiben in deinem Browser. Kein Server, kein Tracking.