CSS Box Shadow Generator
Generate CSS box-shadow with live preview
How to Use CSS Box Shadow Generator
- 1Adjust sliders for horizontal offset, vertical offset, blur radius and spread.
- 2Choose the shadow color and opacity.
- 3Toggle inset for inner shadows.
- 4See the live preview and copy the CSS code.
About CSS Box Shadow Generator
Generate CSS box-shadow values visually with sliders for offset, blur, spread and color. Toggle inset shadows, adjust opacity, and see a live preview. Includes common presets for quick styling. Copy the CSS code with one click.
Frequently Asked Questions
What is CSS box-shadow?
box-shadow adds shadow effects around an element's frame. The syntax is: box-shadow: offsetX offsetY blurRadius spreadRadius color. You can add multiple shadows separated by commas.
What is the difference between blur and spread?
Blur controls how soft or sharp the shadow edge is — higher values create softer shadows. Spread controls the shadow size — positive values expand the shadow, negative values shrink it.
What is an inset shadow?
An inset shadow appears inside the element instead of outside it. It creates a pressed-in or sunken effect, commonly used for input fields and buttons.