CSS-Box-Shadow-Generator
Mehrstufige CSS-Box-Schatten visuell erstellen mit Live-Vorschau — CSS mit einem Klick kopieren
Preview
Shadow Layers
(1/8)CSS Output
box-shadow: 0px 8px 24px -4px rgba(99, 102, 241, 0.5);
CSS Box Shadow Generator
Build multi-layer CSS box shadows visually with live preview. Adjust offset, blur, spread, color, and opacity for each layer, then copy the ready CSS.
FAQ
What is the CSS box-shadow syntax?
box-shadow: offset-x offset-y blur-radius spread-radius color. Example: box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1).
How do I add multiple shadows?
Separate multiple shadow values with commas: box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 10px 40px rgba(0,0,0,0.05).
What is an inset shadow?
Adding the 'inset' keyword makes the shadow appear inside the element rather than outside — useful for pressed button states.
Weiter entdecken
Weitere Entwickler-Tools, die Ihnen gefallen könnten…
JSON-Formatierer
JSON mit Syntaxhervorhebung und Fehlererkennung formatieren, validieren und minifizieren
Base64 Encoder/Decoder
Text oder Dateien nach Base64 kodieren und Base64-Strings in lesbaren Text dekodieren
URL Encoder/Decoder
URL-Komponenten und Query-String-Parameter kodieren und dekodieren
UUID-Generator
Zufällige UUIDs (v1, v4) generieren oder mehrere UUIDs in Bulk erstellen
Hash-Generator
MD5-, SHA-1-, SHA-256-, SHA-512-Hashes aus Text oder Dateien generieren
Regex-Tester
Reguläre Ausdrücke mit Echtzeit-Übereinstimmungshervorhebung testen
JWT-Decoder
JSON Web Tokens dekodieren und prüfen — Header, Payload und Signaturen ansehen
HTML-Formatierer
HTML-Code mit korrekter Einrückung und Syntaxhervorhebung formatieren