Filter invert

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

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

", "filter: invert(\%);"], ["invert-(\)", "filter: invert(var(\));"], ["invert-[\]", "filter: invert(\);"], ]} />

Examples

Basic example

Use utilities like invert and invert-20 to control the color inversion of an element:

{

invert-0

invert-20

invert

}

<!-- [!code classes:invert-0,invert-20,invert] -->
<img class="invert-0" src="/img/mountains.jpg" />
<img class="invert-20" src="/img/mountains.jpg" />
<img class="invert" src="/img/mountains.jpg" />

Using a custom value

Responsive design