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.
Last reviewed by the M2Toolkit team.