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.";

<ApiTable rows={[ ["filter-none", "filter: none;"], ["filter-(<custom-property>)", "filter: var(<custom-property>);"], ["filter-[<value>]", "filter: <value>;"], ]} />

Examples

Basic example

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

        <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
      </div>
    </div>
    <div className="flex shrink-0 flex-col items-center">
      <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">grayscale</p>
      <div className="relative grayscale">
        
        <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
      </div>
    </div>
    <div className="flex shrink-0 flex-col items-center">
      <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 italic dark:text-gray-400">
        combined
      </p>
      <div className="relative blur-xs grayscale">
        
        <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
      </div>
    </div>
  </div>
</div>

} </Example>

<!-- [!code classes:blur-xs,grayscale] -->

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] -->

Using a custom value

<UsingACustomValue element="img" elementAttributes={{ src: "/img/mountains.jpg" }} utility="filter" value="url('filters.svg#filter-id')" />

Applying on hover

<TargetingSpecificStates element="img" elementAttributes={{ src: "/img/mountains.jpg" }} property="filter" defaultClass="blur-sm" featuredClass="filter-none" />

Responsive design

<ResponsiveDesign element="img" elementAttributes={{ src: "/img/mountains.jpg" }} property="filter" defaultClass="blur-sm" featuredClass="filter-none" />