Filter brightness

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

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

Examples

Basic example

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

{

brightness-50

brightness-100

brightness-125

brightness-200

}

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

Using a custom value

Responsive design