CSS Box Shadow Generator
Generated CSS
How to Use the CSS Box Shadow Generator
- 1Use the sliders to adjust horizontal offset (X), vertical offset (Y), blur radius, and spread radius for the selected shadow layer.
- 2Pick a shadow color using the color picker. Adjust opacity using the opacity slider.
- 3Toggle the Inset checkbox to switch between outer and inner shadow.
- 4Add up to 5 layers by clicking the + Layer button for complex multi-shadow effects.
- 5Click Copy CSS to copy the complete box-shadow CSS to your clipboard.
Features
Live Preview
See your shadow changes instantly as you drag sliders — no refresh needed.
Multi-layer Shadows
Add up to 5 separate shadow layers for complex, realistic effects.
Inset / Outer
Toggle inset mode to create inner shadows for embossed or pressed-in effects.
Color & Opacity
Full color picker with separate opacity control. Output uses rgba() automatically.
One-click Copy
Copy the complete CSS declaration with one click. Paste directly into your stylesheet.
Custom Background
Adjust the preview background color to match your actual page background.
Use Cases
- Web designers creating card components, modals, or buttons that need depth and dimension.
- Front-end developers experimenting with shadow effects without memorizing CSS syntax.
- Designers building neumorphic (soft UI) designs that require precise inset shadows.
- Students learning CSS by visualizing how each shadow parameter affects the output.
- Developers quickly generating complex multi-layer shadows for design systems.
Frequently Asked Questions
What is CSS box-shadow?
CSS box-shadow adds shadow effects around an HTML element's frame. It takes values for horizontal offset, vertical offset, blur radius, spread radius, color, and optionally 'inset' for inner shadows.
Can I add multiple shadow layers?
Yes. Click + Layer to add up to 5 layers. Each layer is independent with its own settings. Multiple shadows are comma-separated in the CSS output.
Does this work in all browsers?
box-shadow is supported in all modern browsers without vendor prefixes. The generated CSS works in Chrome, Firefox, Safari, Edge, and others.
What does 'spread' do?
The spread value expands or contracts the shadow. Positive values make the shadow larger than the element, negative values shrink it. A spread of 0 keeps the shadow the same size as the element.
How do I use the generated CSS?
Click Copy CSS to copy the property. Paste it as a CSS rule: .my-element { box-shadow: [pasted value]; }. You can also paste it directly into browser DevTools.