Illustrating Shadow Intensity

Standard Shadow (`shadow-md`)

Profile Card

This card uses `shadow-md`, providing a subtle lift without being overpowering.

Content Area

Heavier Shadow (`shadow-xl`)

Profile Card (Heavy Shadow)

This card uses `shadow-xl`. Notice how it feels heavier and can dominate the visual hierarchy more than necessary.

Content Area

Very Heavy Shadow (`shadow-2xl`)

Profile Card (Very Heavy Shadow)

`shadow-2xl` is even more pronounced. Use such strong shadows with great caution and specific intent, as they can easily make the UI feel cluttered.

Content Area

Gotcha Reminder: Overuse of very dark or large shadows can make the UI look heavy or cluttered. Start with subtle shadows like `shadow-sm` or `shadow-md` and use stronger shadows intentionally for specific emphasis.