Box Shadow Generator
Create polished CSS box shadows with intuitive sliders. Stack multiple shadow layers for depth, adjust horizontal and vertical offsets, blur, spread, color, and opacity. See changes live on a preview card and copy the CSS when you are happy with the result.
box-shadow: 0px 4px 24px -4px rgba(0, 0, 0, 0.12);How it works
The CSS box-shadow property accepts one or more shadow layers separated by commas.
Each layer defines horizontal offset, vertical offset, blur radius, spread radius, and color.
The optional inset keyword creates an inner shadow.
Layering multiple shadows is a common technique for realistic depth. The "Layered Depth" preset demonstrates this with three shadows of increasing size and decreasing opacity. Neumorphism uses one dark and one light shadow to create an embossed effect.
All values update the preview card in real time. The generated CSS string is ready to paste
into your stylesheet. Colors use rgba() notation to support opacity.