Filter grayscale

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

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

Examples

Basic example

Use utilities like grayscale and grayscale-75 to control the amount of grayscale effect applied to an element:

{

grayscale-0

grayscale-25

grayscale-50

grayscale

}

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

Using a custom value

Responsive design