Shadow
You might say
Add a light shadow under the card so it feels like it's floating above the page.
Use light and depth to separate overlapping surfacesA shadow can show that a menu, dialog, or card sits above another surface. It should support a real layer relationship, not decorate every box. A small, consistent shadow scale is easier to read than many unrelated effects.
When to use it
- Lift a floating menu above the page
- Separate a dialog from its backdrop
- Show an elevated card on a similar backgroundAll statesAll statesIn progressCompletedExpired
- Build a small set of depth levels
When NOT to use it
- Add a strong shadow to every container
- Use several shadow directions on the same page
- Rely on shadow alone when contrast is too low
- Make a flat item look clickable when it is not
Anatomy
Card☀
the box that casts a shadow
x/y offset + blur + diffuse, color with transparency
If the whole site is in the same direction, the shadows will not be messy.
Variants
Small
Card
The default level of ordinary cards
Medium
Floating
Hover, drop-down menu
Large
Pop-up
The top layer such as pop-ups and drawers
Inset
Groove
Input boxes and progress slots are made concave.
Typical use cases
Dropdown
Design-guidelines.md
Updated yesterday at 6:02 PM
Default · Minimal shadow
Homepage-refresh.fig
Updated 2 hours ago
Hover · Lifts with a stronger shadow
Modal
Floating card
Sort by latest update
Sticky header
Storage Space7.2 / 10 GB
The groove is recessed with inset inner shadow, so that the fill bar looks like it is embedded inside
Further reading