Box Shadow Generator
Create CSS box shadows visually. Adjust blur, spread, color, and offset with live preview.
Shadows
Presets
Preview
CSS Code
box-shadow: none;Box Shadow Properties
X/Y Offset: Horizontal and vertical position of the shadow relative to the element.
Blur Radius: How soft/fuzzy the shadow appears. Higher = softer.
Spread: Expands or contracts the shadow. Negative values shrink it.
Inset: Places the shadow inside the element instead of outside.
How to Use Box Shadow Generator
- Use sliders to adjust shadow offset (X and Y)
- Set blur radius for softness
- Adjust spread for shadow size
- Pick shadow color and opacity
- Toggle inset for inner shadows
- Copy the generated CSS code
About Box Shadow Generator
Design perfect CSS box shadows with visual controls. Adjust horizontal and vertical offset, blur radius, spread, and color with real-time preview. Add multiple shadows for complex effects. Supports inset shadows. Copy the generated CSS code with one click. No coding required - just slide and click.
Frequently Asked Questions
What's the difference between blur and spread?
Blur makes the shadow softer/fuzzier. Spread makes the shadow larger (positive) or smaller (negative) than the element.
Can I add multiple shadows?
Yes! Click "Add Shadow" to layer multiple shadows. Each can have different settings for complex effects.
What is an inset shadow?
Inset shadows appear inside the element instead of outside, creating an "pressed in" or engraved effect.
What browsers support box-shadow?
Box-shadow is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. No prefixes needed.