filter: blur()

Утилиты для применения размывающих фильтров к элементу.

Class Styles

Class	Styles
`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>);`

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>);

Примеры

Используйте утилиты типа blur-sm и blur-lg для размытия элемента:

Используйте синтаксис blur-[<value>] , чтобы задать blur на основе полностью пользовательского значения:

<img class="blur-[2px] ..." src="/img/mountains.jpg" />

Для переменных CSS вы также можете использовать синтаксис: blur-(<custom-property>)

<img class="blur-(--my-blur) ..." src="/img/mountains.jpg" />

Это просто сокращение, blur-[var(<custom-property>)] которое автоматически добавляет функцию var().

Префикс a filter: blur() утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<img class="blur-none md:blur-lg ..." src="/img/mountains.jpg" />

Подробнее об использовании вариантов читайте в документации по вариантам.

Используйте переменные темы --blur-* для настройки утилит blur в вашем проекте:

@theme {  --blur-2xs: 2px; }

Теперь утилиту blur-2xs можно использовать в вашей разметке:

<img class="blur-2xs" src="/img/mountains.jpg" />

Подробнее о настройке темы читайте в документации темы.