Filters
filter: hue-rotate()
Utilities for applying hue-rotate filters to an element.
| Class | Styles |
|---|---|
hue-rotate-<number> | filter: hue-rotate(<number>deg); |
-hue-rotate-<number> | filter: hue-rotate(calc(<number>deg * -1)); |
hue-rotate-(<custom-property>) | filter: hue-rotate(var(<custom-property>)); |
hue-rotate-[<value>] | filter: hue-rotate(<value>); |
Examples
Basic example
Use utilities likehue-rotate-90 andhue-rotate-180 to rotate the hue of an element by degrees:
hue-rotate-15
hue-rotate-90
hue-rotate-180
hue-rotate-270
<img class="hue-rotate-15" src="/img/mountains.jpg" /><img class="hue-rotate-90" src="/img/mountains.jpg" /><img class="hue-rotate-180" src="/img/mountains.jpg" /><img class="hue-rotate-270" src="/img/mountains.jpg" />Using negative values
Use utilities like-hue-rotate-15 and-hue-rotate-45 to set a negative hue rotate value:
-hue-rotate-15
-hue-rotate-45
-hue-rotate-90
<img class="-hue-rotate-15" src="/img/mountains.jpg" /><img class="-hue-rotate-45" src="/img/mountains.jpg" /><img class="-hue-rotate-90" src="/img/mountains.jpg" />Using a custom value
Use thehue-rotate-[<value>] syntax to set the hue rotation based on a completely custom value:
<img class="hue-rotate-[3.142rad] ..." src="/img/mountains.jpg" />For CSS variables, you can also use thehue-rotate-(<custom-property>) syntax:
<img class="hue-rotate-(--my-hue-rotate) ..." src="/img/mountains.jpg" />This is just a shorthand forhue-rotate-[var(<custom-property>)] that adds thevar() function for you automatically.
Responsive design
Prefix afilter: hue-rotate() utility with a breakpoint variant likemd: to only apply the utility at medium screen sizes and above:
<img class="hue-rotate-60md:hue-rotate-0 ..." src="/img/mountains.jpg" />Learn more about using variants in thevariants documentation.