Tailwind CSS - Backdrop Opacity

Creating Frosted Glass Effects with Backdrop Filters

Tailwind’s backdrop filter utilities allow you to apply graphical effects like blur, brightness, and opacity to the area behind an element. The backdrop-opacity-* classes specifically control the transparency of the content visible behind a given element.

Backdrop Opacity Utilities

Use these utilities to control the opacity of the backdrop. This effect requires the element to have a semi-transparent background.

Class	CSS Properties
backdrop-opacity-0	—tw-backdrop-opacity: 0;
backdrop-opacity-5	—tw-backdrop-opacity: 0.05;
backdrop-opacity-10	—tw-backdrop-opacity: 0.1;
backdrop-opacity-25	—tw-backdrop-opacity: 0.25;
backdrop-opacity-50	—tw-backdrop-opacity: 0.5;
backdrop-opacity-75	—tw-backdrop-opacity: 0.75;
backdrop-opacity-100	—tw-backdrop-opacity: 1;

Note: Tailwind uses CSS custom properties (--tw-backdrop-opacity) to combine multiple backdrop filters (blur, saturate, etc.) into a single backdrop-filter declaration.

How It Works & When to Use It

• Key Requirement: For any backdrop-* utility to be visible, the element must have some level of transparency. This is typically achieved by setting a background color with an alpha channel, like bg-black/50 or bg-white/70 (the / syntax is a modern Tailwind shorthand for opacity).
• Common Use Case: The most popular application is creating ‘frosted glass’ UI elements, such as modal dialogs, navigation bars, or sidebars that sit on top of other content.

Practical Application: Building a Modal with a Backdrop

This example shows a button that reveals a modal dialog. The overlay behind the modal uses backdrop-blur and a semi-transparent background to create a modern, frosted glass effect.

<!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.tailwindcss.com"></script>
  <title>Backdrop Filter Modal</title>
</head>
<body class="bg-slate-200">

  <!-- Background Content -->
  <div class="relative p-8">
    <img alt="Abstract background" class="absolute inset-0 w-full h-full object-cover" src="https://placehold.co/1200x800/d1d5db/374151?text=Background">
    <div class="relative max-w-xl mx-auto bg-white/75 p-8 rounded-lg shadow-xl">
      <h1 class="text-3xl font-bold text-slate-900">Main Content</h1>
      <p class="text-slate-700 mt-4">This is the content on the page, which will be visible behind the modal's backdrop. Click the button to see the effect.</p>
      <button onclick="document.getElementById('modal').classList.remove('hidden')" class="mt-6 bg-indigo-600 text-white font-bold py-2 px-4 rounded-lg hover:bg-indigo-700 transition-colors">Open Modal</button>
    </div>
  </div>

  <!-- Modal with Backdrop -->
  <div id="modal" class="hidden fixed inset-0 z-10 flex items-center justify-center">
    <!-- Backdrop Overlay: semi-transparent background + backdrop blur -->
    <div class="absolute inset-0 bg-black/30 backdrop-blur-sm"></div>

    <!-- Modal Content -->
    <div class="relative bg-white w-full max-w-md p-6 rounded-xl shadow-2xl m-4">
        <h2 class="text-xl font-bold text-slate-800">Modal Dialog</h2>
        <p class="text-slate-600 mt-2">Notice the 'frosted glass' effect on the background content behind this modal.</p>
        <button onclick="document.getElementById('modal').classList.add('hidden')" class="mt-6 bg-slate-200 text-slate-800 font-bold py-2 px-4 rounded-lg hover:bg-slate-300 transition-colors">Close</button>
    </div>
  </div>

</body>
</html>

Browser Support & Fallbacks

The backdrop-filter property is well-supported in all modern browsers (Chrome, Firefox, Safari, Edge). However, it is not supported in older browsers like Internet Explorer. Since it’s a purely aesthetic effect, it’s a perfect candidate for progressive enhancement. Users with modern browsers get the enhanced experience, while users on older browsers will simply see a semi-transparent overlay without the blur, which is a perfectly acceptable fallback.