Tailwind CSS Text Shadow Tutorial for Beginners

Text shadow is a visual effect that adds depth and emphasis to text. It is commonly used in hero sections, banners, headings, and highlighted content.

With Tailwind CSS, you can apply text shadows easily using utility classes — without writing custom CSS.

In this tutorial, you will learn:

How to apply basic text shadow
How to control shadow size
How to change shadow color
How to adjust shadow opacity
How to remove shadow
How to use custom text shadow values
How to apply responsive text shadow

Let’s begin step by step.

What is Text Shadow in CSS?

In traditional CSS, text shadow is written like this:

text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);

In Tailwind CSS, you simply use a class like:

<p class="text-shadow-md">Hello World</p>

This keeps your code clean and consistent.

Basic Text Shadow Utilities

Tailwind provides predefined text shadow sizes:

text-shadow-2xs
text-shadow-xs
text-shadow-sm
text-shadow-md
text-shadow-lg
text-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">

  <p class="text-2xl text-shadow-2xs">
    Small Shadow
  </p>

  <p class="text-2xl text-shadow-sm">
    Medium Shadow
  </p>

  <p class="text-2xl text-shadow-lg">
    Large Shadow
  </p>

</body>
</html>

You will notice the shadow becomes more visible as the size increases.

Adjusting Text Shadow Opacity

You can modify the opacity of the shadow using the opacity modifier.

Example:

<p class="text-2xl text-shadow-lg">
  Default Shadow
</p>

<p class="text-2xl text-shadow-lg/20">
  Light Shadow
</p>

<p class="text-2xl text-shadow-lg/50">
  Strong Shadow
</p>

Increasing opacity makes the shadow more pronounced.

Changing Text Shadow Color

By default, text shadow is black with low opacity. You can change the shadow color using Tailwind color utilities.

Example:

<button class="text-2xl text-shadow-md text-shadow-indigo-500">
  Indigo Shadow
</button>

<button class="text-2xl text-shadow-md text-shadow-red-500/60">
  Red Shadow
</button>

You can use any Tailwind color:

text-shadow-blue-500
text-shadow-green-500
text-shadow-cyan-500
text-shadow-pink-500

This allows creative UI design.

Removing Text Shadow

If a shadow is applied and you want to remove it:

<p class="text-shadow-none">
  No Shadow
</p>

This is useful when overriding styles in dark mode or responsive layouts.

Custom Text Shadow Values

If predefined sizes are not enough, you can use custom values.

Example:

<p class="text-shadow-[0_20px_30px_rgba(0,0,0,0.3)]">
  Custom Shadow
</p>

You can also use CSS variables:

<p class="text-shadow-(--my-text-shadow)">
  Custom Shadow Variable
</p>

This gives full flexibility for advanced UI effects.

Responsive Text Shadow

Tailwind follows a mobile-first approach.

Example:

<p class="text-shadow-none md:text-shadow-lg">
  Shadow appears on medium screen and above
</p>

Explanation:

Mobile → no shadow
Medium screens → large shadow

This is useful for hero sections.

Real-World Example (Hero Heading)

<div class="h-screen bg-blue-600 flex items-center justify-center">
  <h1 class="text-5xl text-white text-shadow-lg">
    Welcome to OnlineLearner
  </h1>
</div>

This creates a professional hero heading with depth.

Customizing Text Shadow in Tailwind Theme

If you are not using CDN and working with Tailwind config, you can define custom shadow sizes.

Example:

@theme {
  --text-shadow-xl: 0 35px 35px rgba(0, 0, 0, 0.25);
}

Now you can use:

<p class="text-shadow-xl">
  Extra Large Shadow
</p>

You can also customize shadow colors in your theme.

Best Practices for Beginners

If you are learning Tailwind CSS:

Use subtle shadows for readability
Avoid very strong shadows on normal text
Use larger shadows only for headings
Combine with responsive utilities
Test readability on different backgrounds

Remember: Text shadow should enhance design, not reduce clarity.

Frequently Asked Questions

What does text-shadow-md do?

It applies a medium-sized shadow to the text.

How do I change text shadow color?

Use:

text-shadow-blue-500

You can also adjust opacity:

text-shadow-blue-500/50

How do I remove text shadow?

Use:

text-shadow-none

Can I apply text shadow only on desktop?

Yes:

md:text-shadow-lg

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Tailwind CSS Border Radius Tutorial for Beginners

Next: Tailwind CSS Box Shadow Tutorial for Beginners

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