Generate CSS box-shadow values visually. Configure offset, blur, spread, color, and opacity for perfect drop shadows with live preview and copy-ready CSS.
The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple shadows separated by commas. Shadows help create depth, hierarchy, and visual interest in UI design. This generator lets you fine-tune all shadow parameters with instant visual feedback.
box-shadow: x-offset y-offset blur spread colorBox-shadow parameters: x-offset moves the shadow horizontally (positive = right), y-offset moves it vertically (positive = down), blur radius softens the edges (0 = sharp), spread radius expands/contracts the shadow, and color/opacity control the shadow appearance. Use inset keyword for inner shadows.
| Input | Output |
|---|---|
| X: 0, Y: 4, Blur: 6, Spread: 0, Opacity: 0.1 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| X: 0, Y: 10, Blur: 25, Spread: -5, Opacity: 0.3 | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); |
| X: 0, Y: 1, Blur: 3, Spread: 0, Opacity: 0.08 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* Subtle shadow */ |