filter: hue-rotate()

Utilities for applying hue-rotate filters to an element.

Quick reference

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

<img class="hue-rotate-60" src="/img/mountains.jpg" />
<img class="-hue-rotate-15" src="/img/mountains.jpg" />

Using a custom value

<img class="hue-rotate-[120deg] ..." src="/img/mountains.jpg" />

For CSS variables:

<img class="hue-rotate-(--my-hue) ..." src="/img/mountains.jpg" />

Responsive design

<img class="hue-rotate-15 md:hue-rotate-60 ..." src="/img/mountains.jpg" />