Soft CSS Box Shadow — Ready-Made Code
Build CSS box-shadow code visually: sliders for offset, blur, spread, color with opacity, inset mode and up to four layers with a live preview.
Processed entirely in your browser — nothing you enter here is ever uploaded.
Result
About this tool
This page opens the box-shadow generator preloaded with a soft shadow: no horizontal offset, 8px down, a generous 24px blur and a low 12% black opacity. The preview card renders it immediately — nudge any slider and the CSS line follows in real time.
Soft shadows are the workhorse of modern interfaces. A large blur paired with low opacity lifts a card off the page without drawing a hard outline, which is why most design systems keep their elevation shadows in exactly this range instead of the dense, dark shadows of early flat design.
Copy the box-shadow line straight into your stylesheet, or stack up to three more layers for a richer elevation. The generator runs entirely in your browser — nothing is uploaded anywhere.
Example. The default layer copies box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25).
Limit. No more than four shadow layers can be stacked.