Box shadow generator
Tune CSS box-shadow visually: add or stack layers, set horizontal and vertical offsets, blur, spread, color and inset, preview live and copy the code.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Shadow layers
Earlier layers paint on top of later ones; layers are separated by commas
Presets
Click a preset to apply it
Preview
The preview card reflects the current shadow
CSS code
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
What this tool does
- Tune a card or button hover effect by dragging the sliders instead of editing values back and forth in DevTools, then copy the `box-shadow` declaration.
- Build layered shadows — a soft drop shadow plus a coloured glow — with offsets, blur, spread and colour set per layer, in stacking order.
- Start from a preset: soft, hover, inset or the neon stack, then fine-tune.
- Use 8-digit HEX for translucent colours (such as #1F818666) and let the tool convert them to rgba() instead of computing alpha by hand.
Example
Input
Preset “Soft”: 0px 4px 10px 0px, colour #0000001A, not inset
Output
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
The last two digits of an 8-digit HEX are alpha (0x1A / 255 ≈ 0.1) and get converted to rgba(); a 6-digit opaque colour is emitted as HEX instead.
Frequently asked questions
Why is the colour sometimes HEX and sometimes rgba()?
It depends on whether alpha is below 1. A 6-digit HEX (#4D6BFE), or 8 digits ending in FF, is emitted as uppercase HEX; an 8-digit value with transparency (#1F818666) becomes rgba() because that reads better in most codebases. Only HEX is accepted — `red` or `rgb(0,0,0)` is rejected with “Shadow colors must be valid HEX values”.
Can spread be negative?
Yes, and it is the standard trick for a narrow shadow hugging the bottom edge — the “hover” preset uses −6px. Blur cannot be negative and is clamped to 0. Offsets, blur and spread are all limited to ±1000px.
Does the order of shadow layers matter?
Yes. In a comma-separated shadow list, earlier entries paint on top. So for a layered look with a tight dark shadow over a wide soft one, put the tight dark layer first. In the tool, layer order is list order — add or remove layers to rearrange.
Can I mix inset and outset shadows?
Yes. Each layer has its own “Inset” checkbox, and checking it prepends `inset` to that layer only, e.g. `inset 0px 2px 6px 0px rgba(0, 0, 0, 0.2)`. Inset shadows paint inside the element, so they usually need smaller offsets and blur.
Can I paste the generated code as-is?
Yes — the output is a single standard `box-shadow: …;` declaration you can drop into a stylesheet. No network requests are made and the preview uses a real DOM element on the page, so what you see is what you get. Note that the copy only contains the declaration, not a selector.
Keywords：cssbox-shadowshadowinsetelevation阴影盒子阴影内阴影投影多层阴影开发工具