Filter sepia

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: sepia()"; export const description = "Utilities for applying sepia filters to an element.";

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

Examples

Basic example

Use utilities like sepia and sepia-50 to control the sepia effect applied to an element:

{

sepia-0

sepia-50

sepia

}

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

Using a custom value

Responsive design