Box Shadow
CSSVisual CSS box-shadow builder with multiple layers and presets
Adjust offset, blur, spread, and color sliders and watch a live preview build up the exact `box-shadow` value, with support for stacking multiple shadow layers to get a more realistic depth effect than a single shadow allows, the same approach Material Design elevation relies on. Each layer can independently toggle inset mode, for shadows that sit inside the element's border rather than outside it, and layers can be reordered while previewing the combined result before copying anything out. `box-shadow` including comma-separated multi-shadow values has full support across all modern browsers, so there's no compatibility caveat here. Everything is generated and previewed locally; nothing about your design gets sent anywhere.
How to use Box Shadow
- 1.Adjust offset, blur, spread, and color sliders to visually design a box-shadow, then copy the generated CSS directly into your stylesheet.
- 2.Stack multiple shadow layers to create a more realistic depth effect (like Material Design elevation) than a single shadow allows.
- 3.Start from a preset (soft, hard, inset) and tweak it instead of guessing pixel values from scratch.
Frequently asked questions
Use via API, SDK, or MCP
cURL# Free: 1,000 req/day · Pro: 10,000 req/day
curl -X POST https://api.utilix.tech/v1/tools/box-shadow \
-H "Authorization: Bearer utx_live_..." \
-H "Content-Type: application/json" \
-d '{"shadows": [{"x": 0, "y": 4, "blur": 16, "spread": 0, "color": "rgba(0,0,0,0.2)"}]}'Get an API key from your dashboard · Full API docs →