VOOZH about

URL: https://www.geeksforgeeks.org/css/tailwind-css-backdrop-hue-rotate/

⇱ Tailwind CSS Backdrop Hue Rotate - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Tailwind CSS Backdrop Hue Rotate

Last Updated : 23 Jul, 2025

The backdrop hue rotate class is an inbuilt function that is used to apply a filter to the image to set the hue rotation of the image. Tailwind CSS newly added feature brightness in 2.1 version.

Backdrop Hue Rotate:

  • -backdrop-hue-rotate-180: This class used to set the hue-rotate equivalent on an element to CSS hue-rotate(-180).
  • -backdrop-hue-rotate-90: This class used to set the hue-rotate equivalent on an element to CSS hue-rotate(-90).
  • -backdrop-hue-rotate-60: This class used to set the hue-rotate equivalent on an element to CSS hue-rotate(-60).
  • -backdrop-hue-rotate-30: This class used to set the hue-rotate equivalent on an element to CSS hue-rotate(-30).
  • -backdrop-hue-rotate-15: This class used to set the hue-rotate equivalent on an element to CSS hue-rotate(-15).
  • backdrop-hue-rotate-0: This class used to set the hue-rotate equivalent on an element to CSS hue-rotate(0).
  • backdrop-hue-rotate-15: This class used to set the hue-rotate equivalent on an element to CSS hue-rotate(15).
  • backdrop-hue-rotate-30: This class used to set the hue-rotate equivalent on an element to CSS hue-rotate(30).
  • backdrop-hue-rotate-60: This class used to set the hue-rotate equivalent on an element to CSS hue-rotate(60).
  • backdrop-hue-rotate-90: This class used to set the hue-rotate equivalent on an element to CSS hue-rotate(90).
  • backdrop-hue-rotate-180: This class used to set the hue-rotate equivalent on an element to CSS hue-rotate(180).

Syntax:

<element class=
 "filter backdrop-hue-rotate-{amount}">
/* ..... */
</element>

Example:


Output:

👁 Image
Comment