VOOZH about

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

⇱ Tailwind CSS Hue Rotate - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Tailwind CSS Hue Rotate

Last Updated : 23 Jul, 2025

The 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. In CSS, we do that by using the CSS hue-rotate() Function. Tailwind CSS newly added feature brightness in 2.1 version.

Hue Rotate:

  • -hue-rotate-180: This class used to set the hue-rotate quivalent to CSS hue-rotate(-180).
  • -hue-rotate-90: This class used to set the hue-rotate quivalent to CSS hue-rotate(-90).
  • -hue-rotate-60: This class used to set the hue-rotate quivalent to CSS hue-rotate(-60).
  • -hue-rotate-30: This class used to set the hue-rotate quivalent to CSS hue-rotate(-30).
  • -hue-rotate-15: This class used to set the hue-rotate quivalent to CSS hue-rotate(-15).
  • hue-rotate-0: This class used to set the hue-rotate quivalent to CSS hue-rotate(0).
  • hue-rotate-15: This class used to set the hue-rotate quivalent to CSS hue-rotate(15).
  • hue-rotate-30: This class used to set the hue-rotate quivalent to CSS hue-rotate(30).
  • hue-rotate-60: This class used to set the hue-rotate quivalent to CSS hue-rotate(60).
  • hue-rotate-90: This class used to set the hue-rotate quivalent to CSS hue-rotate(90).
  • hue-rotate-180: This class used to set the hue-rotate quivalent to CSS hue-rotate(180).

Syntax: 

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

Example:

Output:

👁 Image
Comment