Tune the shadow with sliders
Watch the preview box as you drag, then copy the single box-shadow line. Here's what each value does.
| Property | Effect |
|---|---|
| offsetX / offsetY | Horizontal and vertical position |
| blur | Edge softness (higher = softer) |
| spread | Grows or shrinks the shadow |
| color | Shadow color and opacity |
| inset | Carves the shadow inward |
What makes a shadow look real
- Avoid 100% black. Real shadows aren't pure black. Lowering opacity —
rgba(0,0,0,0.15)— looks far more natural. - Make offsetY larger than offsetX. Light usually comes from above, so shadows fall downward.
- Layer several. Two or three faint shadows stacked (a close small one plus a far wide one) read more three-dimensional than a single shadow.
When to use inset
inset puts the shadow inside the element — good for pressed buttons or the inner shading of input fields.
Pick colors with the Color Palette tool, and try the gradient generator for backgrounds.