CSS Visual Directory
Layered Box Shadow
Several stacked shadows that mimic real light falloff.
Edit Layered Box Shadow
Change any value to see it update live.
About this entry
What it is
Several stacked shadows that mimic real light falloff.
Premium cards, modals and hover states.
Copy & use
How to copy and use layered box shadow
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Premium cards, modals and hover states.
- 03
Check the final result
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Value by value
What each part of this rule does
Stacks four shadows at doubling distances to imitate how light actually falls off. One shadow gives a flat edge; several give a gradient of contact.
0 1px 2px- The contact shadow, tight to the element, that sells the join.
0 2px 4px- The second step, each roughly double the last.
0 8px 16px- The outermost layer, carrying the sense of overall height.
rgba(0, 0, 0, 0.07)- A deliberately low alpha, since four layers accumulate.
Making it yours
How to adjust layered box shadow
Keep the doubling ratio and change only the alpha to make the whole stack heavier or lighter. Adjusting one layer alone breaks the falloff that makes it convincing.
Worth knowing before you ship it
Four shadows cost more to paint than one. On a long list, apply it to hovered or focused rows rather than to every item at rest.
Common questions
Using layered box shadow
What is layered box shadow?
Several stacked shadows that mimic real light falloff. Premium cards, modals and hover states.
Where do I put the layered box shadow CSS?
Paste the declaration inside the rule for the element you are styling — a class, an id or a component's scoped stylesheet. Premium cards, modals and hover states. Change one value at a time so you can see what each part contributes, and check the cascade in case a more specific rule already sets the same property.
Will layered box shadow work everywhere?
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Can I customise layered box shadow after copying?
Paste the declaration into the selector for the element you want to style. Adjust one value at a time and check the cascade so an existing rule does not unexpectedly override the effect.
Also known as
Keep browsing