Tailwind CSS Backdrop Hue Rotate

The backdrop-hue-rotate property in Tailwind CSS allows you to apply a hue rotation to the backdrop-filter of an element.

Syntax

.backdrop-hue-rotate-{amount}

• {amount} specifies the amount of hue rotation you want to apply. It can be a value in degrees, ranging from -180 to 180.

Example

<div class="bg-gray-700 p-8 text-white">
  <h1 class="text-xl mb-4">Backdrop Hue Rotate Example</h1>
  <p class="mb-4">This text has a backdrop-filter with a 45 degree hue rotation.</p>
  <p class="backdrop-hue-rotate-45 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
  <p class="mb-4">This text has a backdrop-filter with a -45 degree hue rotation.</p>
  <p class="backdrop-hue-rotate--45">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
</div>

Output

Explanation

In the example above, we have created a simple text container with a gray background color using the bg-gray-700 class in Tailwind CSS. We have added a backdrop-filter to this container using the backdrop-filter utility class and given it a hue rotation of 45 degrees using the backdrop-hue-rotate-45 class. Similarly, we have added another text container below it with a -45 degree hue rotation using the backdrop-hue-rotate--45 class.

Use

The backdrop-hue-rotate property in Tailwind CSS can be used to add a hue rotation to the backdrop-filter of any element on your web page. This property is useful in creating cool and attractive effects on text or image containers.

Important Points

• The backdrop-hue-rotate property only works in combination with the backdrop-filter property and is not supported by some older browsers.
• The range of values accepted by the backdrop-hue-rotate property is from -180 to 180.

Summary

• The backdrop-hue-rotate property in Tailwind CSS allows you to apply a hue rotation to the backdrop-filter of an element.
• The property accepts a range of values from -180 to 180.
• This property is useful in creating cool and attractive effects on text or image containers.