CSS Box Shadow Generator
Design CSS box shadows with a visual editor.
About This Tool
CSS Box Shadow Generator is a free online visual tool for designing CSS box-shadow effects without writing any code. Adjust X offset, Y offset, blur radius, spread radius, and shadow color with interactive sliders. Add multiple shadow layers for depth and complexity. Copy the generated CSS and paste it directly into your stylesheet.
The tool supports both outer shadows (drop shadow effects) and inset shadows (inner shadow, pressed-button effects). Each layer is independently configurable, letting you combine a soft ambient shadow with a sharp directional shadow for realistic depth. Semi-transparent shadow colors can be set via the color picker's alpha channel for more natural-looking results.
CSS Box Shadow Generator is used by frontend developers crafting card, button, modal, and panel UI components, designers prototyping depth and elevation in CSS, and anyone building a design system who needs consistent, precisely defined shadows for different elevation levels.
box-shadow: 4px 4px 15px 0px #00000025;How to Use
- 1
Use the sliders to adjust the shadow offset, blur, spread, and color.
- 2
Add more shadow layers with the Add Shadow button for complex multi-layer effects.
- 3
Copy the CSS box-shadow code and paste it directly into your stylesheet.
- 4
Toggle the Inset option on a shadow layer to create inner shadows or pressed-button effects.
- 5
Combine multiple layers — one subtle outer shadow and one inset highlight — for realistic depth effects.
Features
Multiple Shadow Layers
Stack multiple box-shadow layers to create complex, realistic drop shadow effects.
Inset Shadow Support
Toggle inset mode to place shadows inside the element for pressed or embossed effects.
Full Control
Adjust X/Y offset, blur radius, spread radius, and color independently for each layer.
Copy CSS
Copy the complete box-shadow CSS property value ready to paste into your code.
Common use cases
- ›Design card and panel elevation shadows for Material Design or custom design system components.
- ›Create subtle button drop shadows and inset pressed states for interactive UI elements.
- ›Build modal overlay shadows or popup box-shadow effects for web application dialogs.
- ›Generate layered, multi-depth shadows for hero sections, feature cards, or pricing tables.
FAQ
Can I add multiple shadows?
Yes, add multiple shadow layers and customize each independently with offset, blur, spread, and color.
What is an inset shadow?
An inset shadow appears inside the element instead of outside, creating an indented or pressed effect.
What do the offset, blur, and spread values control?
X/Y offset moves the shadow horizontally/vertically. Blur radius controls how soft the shadow edge is (0 = hard edge). Spread radius expands or shrinks the shadow size. Color sets the shadow's RGBA color including transparency.
Can I use semi-transparent shadow colors?
Yes. Click the color picker and adjust the alpha channel to set shadow transparency. Subtle semi-transparent shadows look more natural than solid black shadows.
Is the generated CSS compatible with all browsers?
Yes. box-shadow is supported by all modern browsers (Chrome, Firefox, Safari, Edge) without vendor prefixes.