How to use the Box Shadow Generator
- Adjust offset, blur and spread.
- Pick the color and opacity.
- Copy the CSS.
What does this tool do?
Subtle shadows use a small vertical offset, a large blur and a negative spread, with low opacity. That's what makes cards look gently raised rather than heavily outlined.
Why use it?
- Cards, modals and buttons.
- See the result before you code it.
- Inset shadows for pressed states.
A soft card shadow
box-shadow: 0px 12px 28px -12px rgba(21, 23, 27, 0.22);
Privacy
Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us. There's no account to create and nothing to install.
Frequently asked questions
Does box-shadow affect layout?
No. Shadows are drawn outside the element without taking up space, so they don't push other elements around. They can be clipped by a parent with overflow: hidden.
Can an element have more than one shadow?
Yes. Separate shadows with commas in the CSS. Layering a small, sharp shadow with a large, soft one often looks more natural than a single shadow.
Last reviewed by the M2Toolkit team.