Filter Invert

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

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

Examples

Basic example

Use utilities like invert and invert-20 to control the color inversion of 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">invert-20</p>
      <div className="relative invert-20">
        
        <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">invert</p>
      <div className="relative invert">
        
        <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
      </div>
    </div>
  </div>
</div>

} </Example>

<!-- [!code classes:invert-0,invert-20,invert] -->

Using a custom value

<UsingACustomValue element="img" elementAttributes={{ src: "/img/mountains.jpg" }} utility="invert" value=".25" name="color inversion" variable="inversion" />

Responsive design

<ResponsiveDesign element="img" elementAttributes={{ src: "/img/mountains.jpg" }} property="filter: invert()" defaultClass="invert" featuredClass="invert-0" />