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.

Live Preview
0
4
20
0
#000000
25
Generated CSS
Adjust parameters above to generate CSS...

How to Use

  1. Adjust the horizontal and vertical offset to position the shadow.
  2. Set the blur radius to control how soft the shadow edges are.
  3. Use spread to make the shadow larger or smaller than the element.
  4. Pick a shadow color and adjust opacity for the right intensity.
  5. Toggle Inset for inner shadows instead of outer shadows.
  6. 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.
Back to CSS Generators