Tailwind CSS Backdrop Hue Rotate

The Backdrop Hue Rotate utilities in Tailwind CSS are used to rotate the hue of the area behind an element. They apply the CSS hue-rotate() filter to the backdrop while leaving the foreground content unaffected.

Backdrop Hue Rotate Classes

backdrop-hue-rotate-0: Applies a hue rotation of 0deg, preserving the original backdrop hue.
backdrop-hue-rotate-15: Applies a hue rotation of 15deg.
backdrop-hue-rotate-30: Applies a hue rotation of 30deg.
backdrop-hue-rotate-60: Applies a hue rotation of 60deg.
backdrop-hue-rotate-90: Applies a hue rotation of 90deg.
backdrop-hue-rotate-180: Applies a hue rotation of 180deg.
-backdrop-hue-rotate-15: Applies a hue rotation of -15deg.
-backdrop-hue-rotate-30: Applies a hue rotation of -30deg.
-backdrop-hue-rotate-60: Applies a hue rotation of -60deg.
-backdrop-hue-rotate-90: Applies a hue rotation of -90deg.
-backdrop-hue-rotate-180: Applies a hue rotation of -180deg.

Tailwind CSS also supports custom values using backdrop-hue-rotate-[<value>] and CSS variables using backdrop-hue-rotate-(<custom-property>).

Note: In Tailwind CSS v4, these utilities can be applied directly without requiring a separate backdrop-filter class.

Syntax

<element class="backdrop-hue-rotate-<number>">
    ...
</element>

Use a negative prefix for negative rotation values, such as -backdrop-hue-rotate-90.

Example:

HTML

<!--Driver Code Starts-->

<!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.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <title>Backdrop Hue Rotate</title>
</head>
<!--Driver Code Ends-->

<body class="bg-gray-100 p-8 text-center">
    <h1 class="mb-3 text-3xl font-bold text-green-700">
        Tailwind CSS Backdrop Hue Rotate
    </h1>

    <p class="mb-6 text-gray-700">
        Compare the hue rotation effects on the background.
    </p>

    <div class="mx-auto grid max-w-4xl grid-cols-1 gap-6 sm:grid-cols-3">

        <div class="relative h-56 overflow-hidden rounded-xl">
            <img
                src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=600&q=80"
                alt="Green landscape"
                class="absolute inset-0 h-full w-full object-cover"
            >
            <div class="absolute inset-0 bg-white/20 backdrop-hue-rotate-90"></div>
            <p class="absolute inset-x-0 bottom-0 bg-black/60 p-3 font-semibold text-white">
                Hue Rotate 90°
            </p>
        </div>

        <div class="relative h-56 overflow-hidden rounded-xl">
            <img
                src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=600&q=80"
                alt="Green landscape"
                class="absolute inset-0 h-full w-full object-cover"
            >
            <div class="absolute inset-0 bg-white/20 backdrop-hue-rotate-180"></div>
            <p class="absolute inset-x-0 bottom-0 bg-black/60 p-3 font-semibold text-white">
                Hue Rotate 180°
            </p>
        </div>

        <div class="relative h-56 overflow-hidden rounded-xl">
            <img
                src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=600&q=80"
                alt="Green landscape"
                class="absolute inset-0 h-full w-full object-cover"
            >
            <div class="absolute inset-0 bg-white/20 -backdrop-hue-rotate-90"></div>
            <p class="absolute inset-x-0 bottom-0 bg-black/60 p-3 font-semibold text-white">
                Hue Rotate -90°
            </p>
        </div>

    </div>
</body>

<!--Driver Code Starts-->
</html>

<!--Driver Code Ends-->

Output: Three landscape images are displayed side by side (on wider screens), showing different backdrop hue rotation effects: 90°, 180°, and -90°. On smaller screens, the images appear vertically stacked.

Tailwind CSS Backdrop Hue Rotate

Backdrop Hue Rotate Classes

Syntax

Explore