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.
box-shadow
You can say this to an AI Agent
Create a consistent shadow hierarchy: keep regular cards mostly flat, use light elevation for dropdowns and popovers, and a clearer but restrained modal shadow with one direction. Never shadow body text; test light and dark surfaces.
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 levelsInset shadows can make a surface appear recessed.
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 notBody text with a drop shadow
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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check