Tailwind CSS - Backdrop Sepia

Modern Tailwind CSS: Backdrop Sepia

The backdrop-sepia utility applies a sepia filter to the backdrop of an element. This means it affects whatever is visible behind the element, making it perfect for creating layered, glass-like UI effects. For this effect to be visible, the element itself must have some level of transparency.

Backdrop Sepia Classes

The classes for backdrop sepia are straightforward.

Class	CSS Filter Property
backdrop-sepia	--tw-backdrop-sepia: sepia(100%);
backdrop-sepia-0	--tw-backdrop-sepia: sepia(0);

To see the effect, you must combine it with other backdrop filter utilities (like backdrop-filter) and a semi-transparent background color (e.g., bg-white/50).

Practical Example: Frosted Glass UI

In this example, we place a card over a colorful background image. The card uses backdrop-blur to create a frosted glass effect and backdrop-sepia to tint the blurred background.

<!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 Sepia Example</title>
</head>
<body>

  <div
    class="relative h-screen w-full flex items-center justify-center p-4 bg-cover bg-center"
    style="background-image: url('https://picsum.photos/id/1015/1200/800')"
  >
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

      <!-- Card without backdrop-sepia -->
      <div class="w-72 h-48 p-4 rounded-xl border border-white/20 bg-white/20 backdrop-blur-md">
        <h3 class="font-bold text-gray-800">No Sepia Effect</h3>
        <p class="text-sm text-gray-700">This card only has a blur effect on its backdrop.</p>
      </div>

      <!-- Card with backdrop-sepia -->
      <div class="w-72 h-48 p-4 rounded-xl border border-white/20 bg-white/20 backdrop-blur-md backdrop-sepia">
        <h3 class="font-bold text-gray-800">With Sepia Effect</h3>
        <p class="text-sm text-gray-700">This card applies both a blur and a sepia filter to the image behind it.</p>
      </div>

    </div>
  </div>

</body>
</html>

Conditional Application

Like other utilities, you can apply backdrop filters conditionally. For example, you could add the sepia effect only on hover.

<div class="backdrop-blur-md backdrop-sepia-0 hover:backdrop-sepia transition-all ...">
  Hover over me to apply the sepia effect.
</div>

Best Practices

Backdrop filters can be computationally expensive. Use them sparingly on elements that don’t cover a large area of the screen or change frequently, to ensure smooth performance, especially on mobile devices.