HomeCSS ToolsCSS Box Shadow Generator

CSS Box Shadow Generator

Build multi-layer CSS box shadows visually. Control X/Y offset, blur, spread, color, opacity, and inset.

Generated CSS

.element {
  box-shadow: 0px 10px 30px -5px rgba(0,0,0,0.30);
}

Need help with CSS Shadows?

Learn how to master elevation and realistic depth for modern UI design with our expert guide on box-shadow layering and physics-based lighting.

Read our Box Shadow Guide