Tailwind CSS Drop Shadow - GeeksforGeeks

Tailwind CSS Drop Shadow

Last Updated : 3 Nov, 2026

The drop shadow utilities in Tailwind CSS are used to apply shadow effects to elements, such as images. These utilities use the CSS drop-shadow() filter function to create a shadow based on the visible shape of an element.

Drop Shadow Classes

  • drop-shadow-2xs: Applies an extra-extra-small drop shadow.
  • drop-shadow-xs: Applies an extra-small drop shadow.
  • drop-shadow-sm: Applies a small drop shadow.
  • drop-shadow: Applies the default drop shadow.
  • drop-shadow-md: Applies a medium drop shadow.
  • drop-shadow-lg: Applies a large drop shadow.
  • drop-shadow-xl: Applies an extra-large drop shadow.
  • drop-shadow-2xl: Applies a double extra-large drop shadow.
  • drop-shadow-none: Removes the drop shadow.

Syntax

<element class="drop-shadow-{size}">...</element>

Example:

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <title>Tailwind CSS Drop Shadow</title>
</head>

<!--Driver Code Ends-->

<body class="min-h-screen bg-gray-100 p-8 text-center">
    <h1 class="mb-4 text-3xl font-bold text-green-700">
        Tailwind CSS Drop Shadow
    </h1>

    <p class="mb-8 text-gray-700">
        Different drop shadow sizes applied to images
    </p>

    <div class="flex flex-wrap justify-center gap-10">
        <div class="p-4">
            <img class="drop-shadow-2xs"
                 src="https://placehold.co/120x120/16a34a/ffffff?text=Image"
                 alt="Extra-extra-small drop shadow">
            <p class="mt-4">drop-shadow-2xs</p>
        </div>

        <div class="p-4">
            <img class="drop-shadow-xs"
                 src="https://placehold.co/120x120/16a34a/ffffff?text=Image"
                 alt="Extra-small drop shadow">
            <p class="mt-4">drop-shadow-xs</p>
        </div>

        <div class="p-4">
            <img class="drop-shadow-sm"
                 src="https://placehold.co/120x120/16a34a/ffffff?text=Image"
                 alt="Small drop shadow">
            <p class="mt-4">drop-shadow-sm</p>
        </div>

        <div class="p-4">
            <img class="drop-shadow"
                 src="https://placehold.co/120x120/16a34a/ffffff?text=Image"
                 alt="Default drop shadow">
            <p class="mt-4">drop-shadow</p>
        </div>

        <div class="p-4">
            <img class="drop-shadow-md"
                 src="https://placehold.co/120x120/16a34a/ffffff?text=Image"
                 alt="Medium drop shadow">
            <p class="mt-4">drop-shadow-md</p>
        </div>

        <div class="p-4">
            <img class="drop-shadow-lg"
                 src="https://placehold.co/120x120/16a34a/ffffff?text=Image"
                 alt="Large drop shadow">
            <p class="mt-4">drop-shadow-lg</p>
        </div>

        <div class="p-4">
            <img class="drop-shadow-xl"
                 src="https://placehold.co/120x120/16a34a/ffffff?text=Image"
                 alt="Extra-large drop shadow">
            <p class="mt-4">drop-shadow-xl</p>
        </div>

        <div class="p-4">
            <img class="drop-shadow-2xl"
                 src="https://placehold.co/120x120/16a34a/ffffff?text=Image"
                 alt="Double extra-large drop shadow">
            <p class="mt-4">drop-shadow-2xl</p>
        </div>

        <div class="p-4">
            <img class="drop-shadow-none"
                 src="https://placehold.co/120x120/16a34a/ffffff?text=Image"
                 alt="No drop shadow">
            <p class="mt-4">drop-shadow-none</p>
        </div>
    </div>
</body>

<!--Driver Code Starts-->
</html>

<!--Driver Code Ends-->

Output: The page displays images with different drop shadow sizes, ranging from extra-extra-small to double extra-large, along with an image without a shadow.

Comment

Explore