Tailwind Drop Shadow
Here we discuss Tailwind Drop Shadow, how to apply it, and how it can make your website more appealing to the eye.
Tailwind Drop Shadow enables you to add shadows to elements.
By default, drop shadows have a color of black and a blur radius of 1px. However, you can adjust the color, size, and spread of the shadow to suit your preferences.
In traditional CSS, we can achieve this by using the CSS drop-shadow() function.
Tailwind CSS added this feature in version 2.1.
Syntax
<element class="filter drop-shadow-{amount}">...</element>You can use the following code to add a drop shadow that is red, has a blur radius of 4px, and has a spread of 2px
<element class="drop-shadow-red-lg">Mr Examples</element>
Tailwind Drop Shadow Classes
| Classes | Overview |
| drop-shadow-sm | This class is intended for applying a small shadow effect. |
| drop-shadow | A normal shadow effect is applied using this class. |
| drop-shadow-md | This class sets a medium shadow effect on an element. |
| drop-shadow-lg | This class results in a large shadow effect on an element. |
| drop-shadow-xl | Using this class, you can set an extra-large shadow effect. |
| drop-shadow-2xl | This class is used to apply a double extra large shadow effect on an element. |
| drop-shadow-none | Shadow effects are removed after the use of this class. |
In below example, we will explore the drop shadow class in Tailwind using drop-shadow-none, drop-shadow-lg and drop-shadow-2xl classes:
Example:
The below example is a practical demonstration of the drop-shadow class in Tailwind using drop-shadow-sm, drop-shadow-md and drop-shadow-xl:
