Tailwind CSS - Backdrop Hue Rotate

Modern Guide to Tailwind CSS: Backdrop Hue Rotate

The backdrop-hue-rotate utilities apply a hue-rotate filter to the area behind an element. This is part of a powerful suite of backdrop-filter utilities that can create effects like frosted glass, color shifts, and more. It only works on elements with some level of transparency.

Core backdrop-hue-rotate Utilities

Class	CSS Properties
backdrop-hue-rotate-0	--tw-backdrop-hue-rotate: hue-rotate(0deg);
backdrop-hue-rotate-15	--tw-backdrop-hue-rotate: hue-rotate(15deg);
backdrop-hue-rotate-30	--tw-backdrop-hue-rotate: hue-rotate(30deg);
backdrop-hue-rotate-60	--tw-backdrop-hue-rotate: hue-rotate(60deg);
backdrop-hue-rotate-90	--tw-backdrop-hue-rotate: hue-rotate(90deg);
backdrop-hue-rotate-180	--tw-backdrop-hue-rotate: hue-rotate(180deg);

Practical Example: Frosted Glass Overlay

Let’s create a common UI pattern: an overlay on top of an image. We’ll combine backdrop-hue-rotate with other backdrop filters like backdrop-blur to achieve a modern look. The image behind the overlay will have its colors shifted.

Pro Tip: You can use negative values for hue rotation by adding a minus sign, like -backdrop-hue-rotate-30. This is useful for reversing a color shift.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
  <title>Backdrop Hue Rotate</title>
</head>
<body class="bg-slate-200 p-8">

  <h1 class="text-3xl font-bold text-center mb-8">Backdrop Filter Showcase</h1>

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

    <!-- Example 1: 90 Degree Rotation -->
    <div class="relative rounded-xl overflow-hidden">
      <img src="https://picsum.photos/id/1060/400/300" alt="Colorful landscape" class="w-full h-full object-cover">
      <div class="absolute inset-0 grid place-items-center bg-black/20 backdrop-blur-sm backdrop-hue-rotate-90">
        <p class="text-white font-bold text-2xl tracking-wider">hue-rotate-90</p>
      </div>
    </div>

    <!-- Example 2: 180 Degree Rotation (Inverted Colors) -->
    <div class="relative rounded-xl overflow-hidden">
      <img src="https://picsum.photos/id/1060/400/300" alt="Colorful landscape" class="w-full h-full object-cover">
      <div class="absolute inset-0 grid place-items-center bg-black/20 backdrop-blur-sm backdrop-hue-rotate-180">
        <p class="text-white font-bold text-2xl tracking-wider">hue-rotate-180</p>
      </div>
    </div>

  </div>

  <div class="mt-12 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-800 p-4 rounded-md">
    <p class="font-bold">Browser Support & Performance</p>
    <p>Backdrop filters are not supported in all browsers (notably, older versions of Firefox required a flag). Always check caniuse.com for the latest compatibility data. Furthermore, these filters can be performance-intensive, especially when animated. Use them judiciously.</p>
  </div>

</body>
</html>