Shadows

🎨 Shadows in Tailwind CSS: Making Things Pop!

The Magic of Shadows

Imagine you’re holding a toy in front of a light. What happens? A shadow appears behind it! Shadows make things look real and 3D instead of flat like a sticker.

In Tailwind CSS, we have magical shadow spells that make our boxes and text look like they’re floating above the page!

🧙‍♂️ Meet Our Shadow Family

Think of shadows like different levels of superpowers:

📦 Box Shadow: Making Boxes Float

The Story

Imagine stacking cards on a table. The cards on top cast shadows on the cards below. That’s exactly what box shadow does!

The Magic Words

<div class="shadow">
  I have a tiny shadow
</div>

<div class="shadow-lg">
  I have a BIG shadow!
</div>

Shadow Sizes (Smallest to Biggest)

graph TD
    A["shadow-sm"] --> B["shadow"]
    B --> C["shadow-md"]
    C --> D["shadow-lg"]
    D --> E["shadow-xl"]
    E --> F["shadow-2xl"]

Real Example

<button class="shadow-lg">
  Click Me!
</button>

This button looks like it’s floating above the page. Click it and it feels real!

💡 Pro Tip

• Cards: Use shadow-md or shadow-lg
• Buttons: Use shadow or shadow-md
• Modals: Use shadow-xl or shadow-2xl

🎨 Box Shadow Color: Paint Your Shadows!

The Story

What if your shadow could be any color? Like a pink shadow for a fairy button, or a blue shadow for an ocean card!

The Magic Words

<div class="shadow-lg shadow-blue-500/50">
  Blue shadow magic!
</div>

<div class="shadow-xl shadow-pink-500/40">
  Pink fairy shadow!
</div>

How It Works

shadow-{color}-{shade}/{opacity}

• color: red, blue, green, pink, etc.
• shade: 100 to 900 (darker)
• opacity: 10 to 100 (see-through)

Color Shadow Examples

Real Example

<button class="shadow-lg shadow-indigo-500/50
  bg-indigo-500 text-white">
  Glowing Button!
</button>

This creates a button that looks like it’s glowing with its own color!

💡 Pro Tip

Match your shadow color to your background for a glow effect. Different colors create different moods!

🖼️ Drop Shadow: For Special Shapes

The Story

Box shadow works on boxes (rectangles). But what about a star? Or a cloud with wavy edges?

Drop shadow is like a smart friend that follows the exact shape of whatever you have!

The Magic Words

<img class="drop-shadow-lg"
  src="star.png" alt="Star">

Drop Shadow Sizes

Box Shadow vs Drop Shadow

graph TD
    A["Box Shadow"] --> B["Rectangle shadow only"]
    C["Drop Shadow"] --> D["Follows actual shape"]

Real Example

<img
  class="drop-shadow-xl"
  src="cloud.png"
  alt="Cloud">

The shadow follows the fluffy edges of the cloud!

💡 When to Use What

• Boxes, cards, buttons: Use shadow-*
• Images, icons, shapes: Use drop-shadow-*

✨ Text Shadow: Words That Glow

The Story

Sometimes text needs to stand out from the background. Text shadow adds a glow behind your words!

The Magic Words

<h1 class="text-shadow">
  I'm glowing!
</h1>

Important Note! 🚨

Tailwind doesn’t have text shadows by default. You need to add custom CSS or use a plugin!

Custom Text Shadow

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.text-shadow-glow {
  text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

How Text Shadow Values Work

text-shadow: X Y blur color;

• X: Move shadow right
• Y: Move shadow down
• blur: How fuzzy
• color: Shadow color

Real Example

<h1 class="text-shadow-glow text-white">
  NEON SIGN!
</h1>

Makes your text look like a glowing neon sign!

💡 Pro Tip

Use text shadows when:

• Text is over busy images
• Creating neon effects
• Making titles stand out

🎯 Quick Summary

🚀 Your Shadow Toolkit

Light Shadows (Subtle)

<div class="shadow-sm">Whisper</div>
<div class="shadow">Normal</div>

Medium Shadows (Noticeable)

<div class="shadow-md">Medium</div>
<div class="shadow-lg">Large</div>

Heavy Shadows (Dramatic)

<div class="shadow-xl">Extra Large</div>
<div class="shadow-2xl">Maximum!</div>

Colored Shadows (Magical)

<div class="shadow-lg shadow-cyan-500/50">
  Cyan glow
</div>

Shape Shadows (Smart)

<img class="drop-shadow-xl" src="logo.png">

🎉 You Did It!

Now you know all four shadow spells:

1. ✅ Box Shadow - Makes boxes float
2. ✅ Shadow Color - Paints shadows any color
3. ✅ Drop Shadow - Follows any shape
4. ✅ Text Shadow - Makes text glow

Go make your designs pop off the page! 🎨