Filter hue rotate

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";

export const title = "filter: hue-rotate()"; export const description = "Utilities for applying hue-rotate filters to an element.";

", "filter: hue-rotate(\deg);"], ["-hue-rotate-\", "filter: hue-rotate(calc(\deg * -1));"], ["hue-rotate-(\)", "filter: hue-rotate(var(\));"], ["hue-rotate-[\]", "filter: hue-rotate(\);"], ]} />

Examples

Basic example

Use utilities like hue-rotate-90 and hue-rotate-180 to rotate the hue of an element by degrees:

{

hue-rotate-15

hue-rotate-90

hue-rotate-180

hue-rotate-270

}

<!-- [!code classes: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

}

<!-- [!code classes:-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

Responsive design