Tailwind CSS - Drop Shadow

Advanced Styling with Drop Shadow

Tailwind’s drop-shadow utility applies a filter to an element, creating a shadow that conforms to the shape of the content itself, including transparency. This is fundamentally different from the box-shadow utility and is incredibly powerful for styling non-rectangular elements like SVGs, transparent PNGs, or even text.

The Critical Difference: drop-shadow vs. shadow

Understanding when to use drop-shadow versus the standard shadow (which uses box-shadow) is key:

• shadow (box-shadow): Applies a shadow to the element’s rectangular bounding box. It ignores transparency and is ideal for cards, buttons, and other rectangular containers.
• drop-shadow (filter: drop-shadow()): Applies a shadow that follows the exact contours of the element’s visible content. It respects transparency, making it perfect for complex shapes.

Drop Shadow Utility Classes

Tailwind provides a range of predefined drop-shadow utilities, mirroring the scale of the standard shadow classes.

Class	CSS Filter 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: none;

Visualizing the Difference: A Practical Example

This example vividly demonstrates the power of drop-shadow on a complex SVG shape compared to a standard shadow.

Example: SVG and Image Shadowing

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Drop Shadow vs. Box Shadow</title>
    <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-slate-100 p-8 flex flex-col items-center justify-center min-h-screen">

    <div class="grid grid-cols-1 md:grid-cols-2 gap-16">

        <!-- Card 1: `drop-shadow` on an SVG -->
        <div class="text-center">
            <h3 class="text-lg font-semibold text-slate-700 mb-4">Using `drop-shadow-xl`</h3>
            <svg class="w-32 h-32 text-blue-500 drop-shadow-xl" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
            </svg>
            <p class="text-sm text-slate-500 mt-4">The shadow perfectly follows the shape of the SVG.</p>
        </div>

        <!-- Card 2: `shadow` (box-shadow) on the same SVG -->
        <div class="text-center">
            <h3 class="text-lg font-semibold text-slate-700 mb-4">Using `shadow-xl`</h3>
            <svg class="w-32 h-32 text-blue-500 shadow-xl rounded-full" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
            </svg>
            <p class="text-sm text-slate-500 mt-4">The shadow is applied to the bounding box, not the shape.</p>
        </div>

    </div>

</body>
</html>

Customizing Your Drop Shadows

For unique design requirements, you can easily add your own drop-shadow values to your tailwind.config.js file. This is useful for matching a specific design system.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      dropShadow: {
        '3xl': '0 35px 35px rgba(0, 0, 0, 0.25)',
        'glow': [
          '0 0 5px rgba(255, 255, 255, 0.3)',
          '0 0 10px rgba(255, 255, 255, 0.2)'
        ]
      }
    }
  }
}

Performance and Best Practices

• Performance: CSS filters like drop-shadow can be more computationally expensive than box-shadow, especially when animated. Use them where they provide clear visual value, but avoid overusing them on complex, dynamic interfaces.
• Stacking: You can stack multiple shadows by providing an array in your config file, as shown in the 'glow' example above.
• Hardware Acceleration: For animations involving filters, consider adding the transform-gpu or will-change-filter utility classes to hint to the browser that it should use hardware acceleration, which can smooth out performance.