CSS Box Shadow Generator
Build multi-layer box shadows visually. Adjust offset, blur, spread, color and opacity — copy the CSS with one click.
What is box-shadow in CSS?
The CSS box-shadow property adds shadow effects around an element's frame. Each shadow layer is defined by horizontal offset, vertical offset, blur radius, spread radius, color, and an optional inset keyword. Multiple comma-separated layers can be stacked for complex effects.
How to use this generator
- Adjust the sliders for each shadow layer — changes appear instantly in the preview.
- Add more layers with the + Add layer button for complex shadow stacks.
- Copy the generated CSS and paste it into your stylesheet.
Frequently Asked Questions
Can I add multiple box shadows?
Yes. CSS supports multiple comma-separated shadows on a single element. Click "Add layer" to stack shadows for depth effects like neumorphism or material elevation.
What is an inset shadow?
An inset shadow is drawn inside the element's border instead of outside. It can create pressed-in or inner-glow effects.
Does box-shadow affect layout?
No. Unlike margin or padding, box-shadow does not take up space in the document layout. Use the spread value carefully to avoid overlapping adjacent elements visually.