Compose layered box shadows with blur, spread, offset, and inset toggles. Fully client-side — no account, uploads, or remote storage.
Added Apr 18, 2026 · Updated Apr 21, 2026
Input
Result
Enter a value for horizontal offset to see your result.
Generates a CSS box-shadow value from offset, blur, spread, color, and inset settings. The value can be copied directly into any stylesheet.
A classic card elevation shadow: centred horizontally, dropping 4px, with a 12px blur and 25% opacity (all values include 'px' suffix).
Inputs
Result
Use an 8-digit hex colour where the last two digits control opacity (00 = transparent, FF = opaque). For example, #00000040 is black at 25% opacity. Alternatively use rgba(), e.g. rgba(0,0,0,0.25).
Yes — CSS box-shadow accepts multiple shadow values separated by commas. For example: box-shadow: 0 2px 4px #0002, 0 8px 24px #0001;