Box Shadow Generator
Build a CSS box-shadow from X/Y offsets, blur, spread, opacity, inset, and color controls.
How to use
- Adjust shadow color, offsets, blur, spread, opacity, and inset.
Capabilities and scope
The selected HEX is converted to alpha rgba and combined with the current controls into one copyable declaration.
How it works
It emits an inset-optional xpx ypx blurpx spreadpx rgba(color,opacity) value.
Example
0, 12px, 24px, 0 at 35% creates a soft downward shadow preview.
Useful for
- Tune card or modal box shadows visually
Before you use it
- Multiple shadow layers and filter:drop-shadow are not authored here.
Frequently asked questions
Is opacity encoded as HEX alpha?
No. The current code outputs an rgba(...) color.