CSS Box Shadow Generator
Build single or layered box shadows with live preview and instant CSS output.
Shadows (1)
Preview
CSS Output
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
CSS box-shadow adds depth and dimension to elements. You can stack multiple shadows for complex effects. The spread radius expands or contracts the shadow, inset makes the shadow appear inside the element, and adjusting opacity creates subtle or dramatic effects.
Frequently Asked Questions
- Horizontal offset, vertical offset, blur radius, spread radius, shadow color with opacity, and inset toggle.
Related Tools
CSS Gradient GeneratorBuild linear and radial CSS gradients visuallyBorder Radius GeneratorGenerate CSS border-radius values visuallyFlexbox GeneratorBuild CSS flexbox layouts with a visual editorCSS Grid GeneratorBuild CSS grid layouts with a visual editorText Shadow GeneratorGenerate CSS text-shadow effects with live previewCSS Animation GeneratorCreate CSS keyframe animations with a live editorClip-Path GeneratorGenerate CSS clip-path polygon shapes visuallyCSS Specificity CalculatorCalculate and compare CSS selector specificity