Free Tool

CSS Box Shadow Generator

CSS Box Shadow Generator: Instantly build custom multi-layered drop shadows and generate clean, production-ready CSS box-shadow property declarations.

Create beautiful depth layout effects instantly with our free CSS box shadow generator. Customize blur radiuses, offsets, spread sizes, and color opacity properties to compute dynamic drop-shadow attribute codes without writing manual styling parameters by hand.

Shift Right (Horizontal): 0px Shift Down (Vertical): 12px Blur Softness: 25px Spread Expansion: 0px Shadow Color Opacity: 0.15 Shadow Base Color:

#0284c7

Live View Preview Box:

Generated CSS Declaration Rule: