Text Shadows in Tailwind CSS

Last updated on May 7, 2022 Pennywise Loading... 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:

<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">KindaCode.com</h1>
        <h1 class="text-7xl font-bold text-white drop-shadow-lg shadow-black">Tailwind Is Awesome</h1>
</div>

That’s it. Further reading:

You can also check out our CSS category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You May Also Like