📦 Box Shadow Generator
Generate CSS box-shadow with visual preview. Control offset, blur, spread, color, and inset — all in your browser, instant results.
About the Box Shadow Generator
This box shadow generator runs entirely in your browser. Adjust the horizontal and vertical offsets, blur radius, spread radius, shadow color, opacity, and inset option to create the perfect shadow. Copy the generated CSS code directly into your project.
Box-shadow properties explained
- Horizontal offset — Positive values move the shadow right, negative values move it left.
- Vertical offset — Positive values move the shadow down, negative values move it up.
- Blur radius — The higher the value, the more blurred and softer the shadow. 0 creates a sharp edge.
- Spread radius — Positive values expand the shadow, negative values shrink it.
- Color & opacity — Set the shadow color and control its transparency.
- Inset — When enabled, the shadow appears inside the element instead of outside.
How to use the generator
- Adjust the sliders for offset, blur, spread, and opacity.
- Pick a shadow color using the color picker.
- Toggle inset if you want an inner shadow.
- Watch the preview box update in real time.
- Click Copy CSS to copy the generated code.
Frequently asked questions
Can I use multiple shadows? The generated CSS shows a single shadow. You can manually combine multiple shadows by comma-separating them in the CSS.
Does the opacity slider affect the color? Yes — the opacity is applied to the shadow color using the RGBA format in the output.
Is box-shadow supported everywhere? Yes, box-shadow is supported in all modern browsers including mobile.