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

<ApiTable rows={[ ["blur-xs", "filter: blur(var(--blur-xs)); /* 4px /"], ["blur-sm", "filter: blur(var(--blur-sm)); / 8px /"], ["blur-md", "filter: blur(var(--blur-md)); / 12px /"], ["blur-lg", "filter: blur(var(--blur-lg)); / 16px /"], ["blur-xl", "filter: blur(var(--blur-xl)); / 24px /"], ["blur-2xl", "filter: blur(var(--blur-2xl)); / 40px /"], ["blur-3xl", "filter: blur(var(--blur-3xl)); / 64px */"], ["blur-none", "filter: ;"], ["blur-(<custom-property>)", "filter: blur(var(<custom-property>));"], ["blur-[<value>]", "filter: blur(<value>);"], ]} />

Examples

Basic example

Use utilities like blur-sm and blur-lg to blur 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">blur-sm</p>
      <div className="relative blur-sm">
        
        <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">blur-lg</p>
      <div className="relative blur-lg">
        
        <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">blur-2xl</p>
      <div className="relative blur-2xl">
        
        <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
      </div>
    </div>
  </div>
</div>

} </Example>

<!-- [!code classes:blur-none,blur-sm,blur-lg,blur-2xl] -->

Using a custom value

<UsingACustomValue element="img" elementAttributes={{ src: "/img/mountains.jpg" }} utility="blur" value="2px" />

Responsive design

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

Customizing your theme

<CustomizingYourTheme element="img" elementAttributes={{ src: "/img/mountains.jpg" }} utility="blur" name="blur" customName="2xs" customValue="2px" />