CSS Box Shadow Generator
Build multi-layer box-shadows visually with sliders — live preview on a card and button, copy production CSS instantly.
Preview
Presets
Shadow layers
Layer 1 controls
CSS output
box-shadow: 4px 4px 12px 0px #00000033;
About this tool
A visual CSS box-shadow builder with live preview. Stack multiple shadow layers to create Material elevations, neumorphic effects, coloured glows, or hard offsets. Adjust offset, blur, spread, colour, opacity, and inset for each layer independently, then copy the generated CSS.
How to use it
Quick steps to get the most out of this utility.
- 1
Start with a preset
Click "Soft card", "Material 2", "Glow blue", or any preset to load a pre-tuned shadow immediately.
- 2
Adjust the sliders
Tweak offset X/Y, blur radius, spread radius, color, and opacity. Changes appear in the live preview instantly.
- 3
Add more layers
Click "Add layer" to stack a second or third shadow. Click each layer in the list to edit its settings independently.
- 4
Copy the CSS
The output panel shows the complete box-shadow CSS. Click Copy to paste it into your stylesheet.
The CSS box-shadow syntax
The full syntax is: box-shadow: [inset] offset-x offset-y blur spread color. Each value is optional except the two offsets and the color. Multiple shadows are comma-separated and rendered front-to-back — the first shadow in the list is on top.
A common mistake is making the blur radius too large or the color fully opaque. Real-world shadows are translucent — use a dark colour at 10–25% opacity rather than solid black. The Soft card preset demonstrates this: a barely-visible translucent shadow that still gives clear depth.
Material Design elevation system
Google's Material Design uses three shadow layers per elevation level: a key shadow (directional), an ambient shadow (soft fill), and sometimes a penumbra. The “Material 2” preset approximates elevation-4 with two stacked shadows. As you increase the offset and blur, the card appears to float higher above the page. A card at rest typically uses elevation-1 (tiny shadow); a dialog uses elevation-24 (large, diffuse shadow).
Neumorphism explained
Neumorphism (soft UI) simulates a surface that appears to extrude from the background. It requires two shadows of opposite directions: one light (from top-left), one dark (from bottom-right), and a background that matches the element's fill. The “Neumorphic” preset uses the same background for both to achieve this look — tweak the background color of your page to make it work end-to-end.
Frequently asked questions
Can I layer multiple shadows?+
Yes — this is one of the main differentiators of this tool. Use the "Add layer" button to stack shadows. CSS box-shadow accepts a comma-separated list, so multiple shadows render in order from front to back. This lets you create sophisticated effects like neumorphism or multi-colour glows.
What does the spread value do?+
Spread expands or contracts the shadow size uniformly before blurring. A positive spread makes the shadow larger than the element; a negative spread makes it smaller. Combining a negative spread with a large blur radius creates a soft, contained shadow.
What is an inset shadow?+
An inset shadow renders inside the element instead of behind it, creating the appearance of a pressed-in or sunken surface. This is the "inner press" effect used for toggle switches, pressed buttons, and neumorphic components.
Why does the color use 8-digit hex?+
Standard hex colors are 6 digits (e.g. #000000). An 8-digit hex adds an alpha channel (e.g. #00000033 for 20% opacity black). CSS box-shadow also accepts rgba(), but 8-digit hex is more compact and universally supported in modern browsers.
How do I copy the CSS for just one shadow layer?+
Click the layer in the layer list on the left to select it, then read its CSS string shown in the list item. The output panel at the bottom shows the full multi-layer property. For a single layer, you can temporarily remove the others, copy, then re-add them.
Keep exploring
More utilities and reading from Toolisk.