Box Shadow Generator
Build a CSS box-shadow with a live preview.
Worth Knowing
The CSS box-shadow property takes several values whose interplay is hard to predict from numbers alone — horizontal and vertical offset, blur, spread, and color — which is exactly why a visual builder helps. The subtle art is realism: soft, low-opacity shadows with a slight downward offset read as natural depth, while harsh dark shadows look artificial. You can also stack multiple shadows on one element and use the 'inset' keyword to carve depth inward rather than casting it outward.
How to Use
- Paste or type your offset x (px) into the Box Shadow Generator above.
- Set any additional options: Offset Y (px), Blur (px), Spread (px), Color, Inset?.
- The output updates instantly and is ready to copy.