CSS Box Shadow Generator
Generate CSS box-shadows
What Is This Tool?
The CSS Box Shadow Generator lets you visually build a box-shadow value by adjusting offset, blur, spread, color, opacity, and inset for one or more shadow layers, with a live preview and the generated CSS ready to copy.
How to Use
Adjust the horizontal/vertical offset, blur, spread, color, and opacity for the shadow layer.
Check "Inset" for an inner shadow instead of a drop shadow.
Click "Add Shadow Layer" to stack multiple shadows together.
Copy the generated box-shadow CSS declaration.
Features
- Live preview box updates as you adjust controls
- Supports multiple stacked shadow layers
- Color picker with independent opacity control per layer
- Inset (inner shadow) toggle per layer
- Copy the exact CSS declaration with one click
- 100% client-side — nothing leaves your browser
Examples
Soft drop shadow:
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.20);
Common Use Cases
- Designing card, button, or modal elevation shadows
- Building layered/soft shadows like Material Design elevation
- Prototyping inset shadows for pressed/active button states
- Quickly copying a shadow value into a component's CSS
Frequently Asked Questions
What does spread do?
Spread expands (positive values) or contracts (negative values) the shadow's size in all directions before the blur is applied, independent of the offset.
How do multiple shadow layers work?
CSS box-shadow accepts a comma-separated list of shadow definitions. Layers are stacked with the first one on top, which lets you combine a tight shadow with a soft, spread-out one for a more realistic look.
What does Inset do?
Inset changes the shadow from an outer drop shadow to an inner shadow that appears to recede into the element, useful for pressed button states or well-like effects.
Why is the color shown as rgba() instead of hex?
box-shadow needs an alpha channel to control opacity, and hex colors don't support that consistently across all browsers, so the tool outputs an rgba() value combining your chosen color and opacity.
Is my design data sent anywhere?
No. The preview and CSS generation happen entirely in your browser using JavaScript. Nothing is uploaded or logged.
Can I remove a shadow layer?
Yes, each layer has its own "Remove Layer" button once you've added more than one.