Filter contrast

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

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

Examples

Basic example

Use utilities like contrast-50 and contrast-100 to control an element's contrast:

{

contrast-50

contrast-100

contrast-125

contrast-200

}

<!-- [!code classes:contrast-50,contrast-100,contrast-125,contrast-200] -->
<img class="contrast-50 ..." src="/img/mountains.jpg" />
<img class="contrast-100 ..." src="/img/mountains.jpg" />
<img class="contrast-125 ..." src="/img/mountains.jpg" />
<img class="contrast-200 ..." src="/img/mountains.jpg" />

Using a custom value

Responsive design