How to Add Drop Shadows in Tailwind CSS

Updated: March 3, 2023 By: Pennywise Post a comment

In Tailwind CSS, you can create drop shadows by using drop-shadow-{amount} utilities. {amount} can be:

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

You can customize the shadow color by using shadow-{color} utilities.

Example:

<div class="flex justify-between p-10">
        <div class="px-20 py-5 bg-blue-600 drop-shadow-xl shadow-blue-600">
            <span class="text-white">Hello</span>
        </div>
        <div class="px-20 py-5 bg-white drop-shadow-lg shadow-black">
            <span>Goodbye</span>
        </div>
        <div class="px-20 py-5 bg-rose-600 drop-shadow-md shadow-rose-600">
            <span class="text-white">Hello</span>
        </div>
</div>

Screenshot:

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

Related Articles