Text Shadows in Tailwind CSS

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



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>

That’s it. Further reading:

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

Notify of
1 Comment
Inline Feedbacks
View all comments
4 months ago

u can’t set color of drop-shadow in tailwind 😐

You May Also Like