Tailwind CSS
/Beginner
Box Shadow
Definition
Utilities for applying drop shadows to elements, creating a sense of depth and elevation.
Explain Like I'm New
Floating boxes. `shadow-sm` makes it look like the card is resting flat on the table. `shadow-2xl` makes it look like the card is floating 6 inches above the page. Use shadows to make important elements (like modals and dropdowns) pop out.
Real World Example
Adding `shadow-md` to a white card on a light gray background, allowing the user's brain to instantly distinguish the card from the background.
Common Use Cases
- •Cards
- •Modals
- •Floating action buttons
Interactive Example
Interview Questions
basic
- What is the standard class to add a medium, modern drop shadow to a card?
intermediate
- Can you change the color of a shadow in Tailwind?