CSS Box Shadow Generator
Build multi-layer CSS box shadows visually with live preview — copy the CSS with one click
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.
Continue Exploring
Other Developer Tools you might like...
JSON Formatter
Format, validate, and minify JSON data with syntax highlighting
Base64 Encoder/Decoder
Encode text to Base64 and decode Base64 strings
URL Encoder/Decoder
Encode and decode URL components and query strings
UUID Generator
Generate random UUID v4 identifiers
Hash Generator
Generate MD5, SHA-1, SHA-256, and SHA-512 hashes from text
Regex Tester
Test and debug regular expressions with match highlighting
JWT Decoder
Decode and inspect JWT token header and payload
HTML Formatter
Beautify and format HTML code with proper indentation