Tailwind CSS - Drop Shadow

Previous
Quiz
Next

Tailwind CSS Drop Shadow is a utility class used to apply a drop shadow filter to an element.

Tailwind CSS Drop Shadow Classes

The following is the list of Tailwind CSS Drop Shadow Classes that are used to effectively apply drop shadow filters.

Class CSS Properties
drop-shadow-sm filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
drop-shadow filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
drop-shadow-md filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
drop-shadow-lg filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
drop-shadow-xl filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
drop-shadow-2xl filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
drop-shadow-none filter: drop-shadow(0 0 #0000);

Functionality of Tailwind CSS Drop Shadow Classes

  • drop-shadow-sm: This class is used to add a small drop shadow to an element.
  • drop-shadow: This class is used to apply a drop shadow filter to an element li>
  • drop-shadow-md: This class is used to apply a medium drop shadow filter to an element.
  • drop-shadow-lg: This class is used to apply a large drop shadow filter to an element.
  • drop-shadow-xl: This class is used to apply an extra-large drop shadow filter to an element.
  • drop-shadow-2xl: This class is used to apply a double extra-large drop shadow filter to an element.
  • drop-shadow-none: This class is used to remove the drop shadow filter from an element..

Tailwind CSS Drop Shadow Classes Example

The following example will illustrate the different visibilities and utilities of Tailwind CSS Drop shadow classes.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-2xl font-bold mb-7">
        Tailwind CSS Drop Shadow Classes
    </h2>
    <div class="flex flex-wrap gap-8">
        <div>
            <p class="text-base mb-2">Drop-shadow-sm</p>
            <div class="w-24 h-24 bg-gray-200 drop-shadow-sm
                        rounded-tl-3xl rounded-br-3xl">
            </div>
        </div>
        <div>
            <p class="text-base mb-2">Drop-shadow-md</p>
            <div class="w-24 h-24 bg-gray-200 drop-shadow-md
                        rounded-tl-3xl rounded-br-3xl">
            </div>
        </div>
        <div>
            <p class="text-base mb-2">Drop-shadow-lg</p>
            <div class="w-24 h-24 bg-gray-200 drop-shadow-lg
                        rounded-tl-3xl rounded-br-3xl">
            </div>
        </div>
        <div>
            <p class="text-base mb-2">Drop-shadow-xl</p>
            <div class="w-24 h-24 bg-gray-200 drop-shadow-xl
                        rounded-tl-3xl rounded-br-3xl">
            </div>
        </div>
        <div>
            <p class="text-base mb-2">Drop-shadow-2xl</p>
            <div class="w-24 h-24 bg-gray-200 drop-shadow-2xl
                        rounded-tl-3xl rounded-br-3xl">
            </div>
        </div>
        <div>
            <p class="text-base mb-2">Drop-shadow-none</p>
            <div class="w-24 h-24 bg-gray-200 drop-shadow-none
                        rounded-tl-3xl rounded-br-3xl">
            </div>
        </div>
    </div>
</body>
</html>
Print Page
Previous
Next