Text Shadows in Tailwind CSS

Updated: December 15, 2023 By: Khue Post a comment

In recent versions of Tailwind CSS, you can add drop shadows to text by using the drop-shadow-{amount} utilities (you can also use these classes for div elements to create box shadows). {amount} can be one of the following:

  • md: Medium
  • lg: Large
  • xl: Extra large
  • 2xl: Double extra large

To set the colors of shadows, you can use shadow-{color} utility classes.

Example

Screenshot:

The code:

<body>
    <div class="m-20">
        <h1 class="text-7xl font-extrabold text-amber-300 drop-shadow-lg ">Hello World</h1>
        <h1 class="text-7xl font-extrabold text-blue-600 drop-shadow-md shadow-blue-600/50">Sling Academy</h1>
        <h1 class="text-7xl font-bold text-white drop-shadow-lg shadow-black">Tailwind Is Awesome</h1>
    </div>
</body>

That’s it. Happy coding & have fun with Tailwind CSS!