Create layered CSS box shadows with a live preview — offset, blur, spread, colour, opacity and inset — and copy the code. Runs entirely in your browser.
Need a developer to build it?
Our developers turn designs into fast, clean and scalable websites and web apps.
The CSS box-shadow property adds a shadow around an element such as a card, button, image or popup. Shadows create depth, separate content from the background and show which elements sit on top.
This free box shadow generator lets you adjust horizontal and vertical offset, blur, spread, colour, opacity and inset with sliders, and stack several shadows into one layered shadow for a softer, more realistic look. Copy the CSS when you are happy with the live preview.
Layered shadows are the secret behind the soft, premium look of many modern interfaces.
A CSS box shadow is written as box-shadow: x-offset y-offset blur spread colour; for example box-shadow: 0 10px 24px 0 rgba(0,0,0,0.25). Use the sliders above, add layers for softer depth, and copy the generated CSS.
Start subtle. Most interfaces need far less shadow than you think.
X moves the shadow sideways, Y moves it down. A small positive Y looks natural.
Blur softens the edge. Spread grows or shrinks the shadow.
Low opacity, around 5% to 20%, looks most realistic.
Add a second shadow for depth, then copy the CSS.
Each shadow has up to five values. Separate layered shadows with commas.
box-shadow: offset-x offset-y blur spread colour;
box-shadow: 0 10px 24px 0 rgba(0,0,0,.25);
/* Layered, soft */
box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
box-shadow: inset 0 2px 4px rgba(0,0,0,.1);Tinting the shadow with your brand colour, such as rgba(2,76,150,.08), often looks softer than pure black.
A product card shadow.
Higher elements cast larger, softer shadows.
| Elevation | Example CSS | Use for |
|---|---|---|
| Low | 0 1px 3px rgba(0,0,0,.1) | Inputs, small cards |
| Medium | 0 6px 16px rgba(0,0,0,.1) | Cards, dropdowns |
| High | 0 16px 40px rgba(0,0,0,.14) | Modals, popovers |
| Inset | inset 0 2px 4px rgba(0,0,0,.08) | Pressed buttons, input fields |
Good shadows are felt rather than noticed.
Use box-shadow with offset, blur, spread and colour values, such as box-shadow: 0 4px 12px rgba(0,0,0,.1).
A shadow drawn inside the element instead of outside, which makes it look pressed in.
Yes. Separate shadows with commas. The generator stacks them for you.
Blur softens the shadow's edge. Spread makes the whole shadow larger or smaller before blurring.
Most widgets have a Box Shadow control under Style or Advanced, or paste the CSS into Custom CSS.
Usually not. Very large blurs animated on many elements can affect scrolling on older phones.
We design and build fast, accessible, conversion-focused websites on WordPress and custom stacks. Explore our web development services.