Filter

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

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

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

Examples

Basic example

Use utilities like blur-xs and grayscale to apply filters to an element:

{

blur-xs

grayscale

combined

}

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

You can combine the following filter utilities: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, saturate, and sepia.

Removing filters

Use the filter-none utility to remove all of the filters applied to an element:

<!-- [!code classes:md:filter-none] -->
<img class="blur-md brightness-150 invert md:filter-none" src="/img/mountains.jpg" />

Using a custom value

Applying on hover

Responsive design