Filter blur

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

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

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

Examples

Basic example

Use utilities like blur-sm and blur-lg to blur an element:

{

blur-none

blur-sm

blur-lg

blur-2xl

}

<!-- [!code classes:blur-none,blur-sm,blur-lg,blur-2xl] -->
<img class="blur-none" src="/img/mountains.jpg" />
<img class="blur-sm" src="/img/mountains.jpg" />
<img class="blur-lg" src="/img/mountains.jpg" />
<img class="blur-2xl" src="/img/mountains.jpg" />

Using a custom value

Responsive design

Customizing your theme