CSS
🎨 Backgrounds
CSS Box Shadow Generator
CSS box-shadow lets you add depth and dimension to elements. This generator supports all shadow properties including offset, blur, spread, color with opacity control, and inset shadows.
Controls
0
4
20
0
#000000
25
Live Preview
Generated CSS
Adjust parameters above to generate CSS...
How to Use
- Adjust the horizontal and vertical offset to position the shadow.
- Set the blur radius to control how soft the shadow edges are.
- Use spread to make the shadow larger or smaller than the element.
- Pick a shadow color and adjust opacity for the right intensity.
- Toggle Inset for inner shadows instead of outer shadows.
- Copy the generated CSS and paste it into your stylesheet.
How It Works
Box shadows are defined as
box-shadow: offset-x offset-y blur spread color. The color uses rgba() for opacity support. The inset keyword reverses the shadow to the inside of the element.