CSS Box Shadow Generator
Design a CSS box-shadow visually and copy the generated code.
About this tool
Design a CSS box-shadow visually with sliders and a live preview, then copy the ready-to-use CSS.
Key Features
- Live visual preview
- Adjustable offset, blur, spread, color, and opacity
- Optional inset (inner) shadow
- Standard, widely-supported CSS output
How to Use
- Adjust the sliders to shape the shadow.
- Pick a color and opacity.
- Check "Inset" for an inner shadow instead of a drop shadow.
- Copy the generated CSS.
Benefits
- Design card and button shadows without trial-and-error in dev tools
- See the effect update instantly as you adjust it
- Get valid CSS syntax every time
Frequently Asked Questions
Blur radius controls how soft and spread-out the shadow's edge looks — higher values create a more diffuse, fading shadow. Spread radius controls the shadow's overall size before blurring is applied — a positive spread expands the shadow outward in every direction, a negative spread shrinks it.
A normal box-shadow appears to sit behind the element, like light casting a shadow outward. Checking "inset" flips this so the shadow appears to be carved into the element from the inside — useful for pressed-button effects or recessed panels.
No. A box-shadow is purely visual and does not take up space in the page layout the way a border or margin would, so it will not push neighboring elements around, even with a large blur or spread.