Tailwind CSS Box Shadow Tutorial for Beginners

Box shadow is one of the most important UI design techniques. It adds depth, separation, and visual hierarchy to elements like cards, buttons, modals, and dropdowns.

With Tailwind CSS, you can apply shadows using simple utility classes — no custom CSS required.

In this tutorial, you will learn:

How to apply basic box shadows
How to change shadow intensity
How to adjust shadow opacity
How to change shadow color
How to use inset shadows
How to use ring utilities
How to apply responsive shadows

Let’s start step by step.

What is Box Shadow in CSS?

Traditional CSS:

box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);

In Tailwind CSS:

<div class="shadow-lg"></div>

Much cleaner and easier to maintain.

Basic Shadow Utilities

Tailwind provides predefined shadow sizes:

shadow-2xs
shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-2xl
shadow-none

Example Using CDN

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100 p-10 space-y-6">

  <div class="bg-white p-6 shadow-sm">shadow-sm</div>
  <div class="bg-white p-6 shadow-md">shadow-md</div>
  <div class="bg-white p-6 shadow-lg">shadow-lg</div>
  <div class="bg-white p-6 shadow-xl">shadow-xl</div>

</body>
</html>

As the size increases, the shadow becomes deeper and more noticeable.

Adjusting Shadow Opacity

You can adjust shadow opacity using the opacity modifier.

Example:

<div class="bg-white p-6 shadow-xl">Default Shadow</div>
<div class="bg-white p-6 shadow-xl/20">Light Shadow</div>
<div class="bg-white p-6 shadow-xl/50">Strong Shadow</div>

Higher opacity makes the shadow more pronounced.

Changing Shadow Color

By default, shadows are black with low opacity. You can change the shadow color.

Example:

<button class="bg-blue-500 text-white px-6 py-3 shadow-lg shadow-blue-500/50">
  Subscribe
</button>

<button class="bg-indigo-500 text-white px-6 py-3 shadow-lg shadow-indigo-500/50">
  Subscribe
</button>

You can use any Tailwind color like:

shadow-red-500
shadow-green-500
shadow-cyan-500

This is useful for glowing button effects.

Adding an Inset Shadow

Inset shadow appears inside the element.

Utilities include:

inset-shadow-2xs
inset-shadow-xs
inset-shadow-sm

Example:

<div class="bg-white p-6 inset-shadow-sm">
  Inset Shadow Example
</div>

To increase visibility:

<div class="bg-white p-6 inset-shadow-sm/50">
  Strong Inset Shadow
</div>

Inset shadows are commonly used in input fields and pressed buttons.

Setting Inset Shadow Color

<div class="bg-white p-6 inset-shadow-sm inset-shadow-indigo-500/50">
  Colored Inset Shadow
</div>

This creates a soft inner glow effect.

Using Ring Utilities

Ring utilities create an outline-style shadow.

Available classes:

ring
ring-2
ring-4

Example:

<button class="ring-2 ring-blue-500 px-6 py-2">
  Subscribe
</button>

Rings are often used for focus states.

Setting Ring Color

<button class="ring-2 ring-blue-500/50 px-6 py-2">
  Subscribe
</button>

You can adjust ring opacity using the modifier.

Adding Inset Ring

<button class="inset-ring-2 inset-ring-blue-500 px-6 py-2">
  Subscribe
</button>

Inset rings appear inside the element instead of outside.

Removing Shadow or Ring

To remove existing shadow:

<div class="shadow-none">
  No Shadow
</div>

To remove ring:

<div class="ring-0">
  No Ring
</div>

Custom Shadow Values

If predefined values are not enough, use custom values.

Example:

<div class="shadow-[0_35px_35px_rgba(0,0,0,0.25)] bg-white p-6">
  Custom Shadow
</div>

Using CSS variable:

<div class="shadow-(--my-shadow) bg-white p-6">
  Custom Variable Shadow
</div>

This provides full flexibility.

Responsive Box Shadow

Tailwind is mobile-first.

Example:

<div class="shadow-none md:shadow-lg bg-white p-6">
  Shadow appears on medium screen
</div>

Explanation:

Mobile → no shadow
Medium screens and above → large shadow

Real-World Example: Card Design

<div class="max-w-sm mx-auto bg-white rounded-xl shadow-lg p-6">
  <h2 class="text-xl font-bold mb-2">Course Card</h2>
  <p class="text-gray-600">Learn Tailwind CSS step by step.</p>
  <button class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
    Enroll Now
  </button>
</div>

This creates a clean, modern card layout.

Best Practices

If you are learning Tailwind CSS:

Use shadow-md or shadow-lg for cards
Avoid extremely heavy shadows on small elements
Use colored shadows carefully
Combine with hover effects
Keep UI consistent across pages

Shadows should enhance design — not distract users.

Frequently Asked Questions

What does shadow-lg mean?

It applies a large box shadow.

How do I create a glowing button?

Use:

shadow-lg shadow-blue-500/50

How do I remove shadow in Tailwind?

Use:

shadow-none

Can I apply shadow only on desktop?

Yes:

md:shadow-lg

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Tailwind CSS Text Shadow Tutorial for Beginners

Next: Tailwind CSS Opacity Tutorial for Beginners (With Practical Examples)

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us