backdrop-filter: blur()

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

Class Styles

Class	Styles
`backdrop-blur-xs`	`backdrop-filter: blur(var(--blur-xs)); /* 4px */`
`backdrop-blur-sm`	`backdrop-filter: blur(var(--blur-sm)); /* 8px */`
`backdrop-blur-md`	`backdrop-filter: blur(var(--blur-md)); /* 12px */`
`backdrop-blur-lg`	`backdrop-filter: blur(var(--blur-lg)); /* 16px */`
`backdrop-blur-xl`	`backdrop-filter: blur(var(--blur-xl)); /* 24px */`
`backdrop-blur-2xl`	`backdrop-filter: blur(var(--blur-2xl)); /* 40px */`
`backdrop-blur-3xl`	`backdrop-filter: blur(var(--blur-3xl)); /* 64px */`
`backdrop-blur-none`	`backdrop-filter: none;`
`backdrop-blur-(<custom-property>)`	`backdrop-filter: blur(var(<custom-property>));`
`backdrop-blur-[<value>]`	`backdrop-filter: blur(<value>);`

backdrop-blur-xs

backdrop-filter: blur(var(--blur-xs)); /* 4px */

backdrop-blur-sm

backdrop-filter: blur(var(--blur-sm)); /* 8px */

backdrop-blur-md

backdrop-filter: blur(var(--blur-md)); /* 12px */

backdrop-blur-lg

backdrop-filter: blur(var(--blur-lg)); /* 16px */

backdrop-blur-xl

backdrop-filter: blur(var(--blur-xl)); /* 24px */

backdrop-blur-2xl

backdrop-filter: blur(var(--blur-2xl)); /* 40px */

backdrop-blur-3xl

backdrop-filter: blur(var(--blur-3xl)); /* 64px */

backdrop-blur-none

backdrop-filter: none;

backdrop-blur-(<custom-property>)

backdrop-filter: blur(var(<custom-property>));

backdrop-blur-[<value>]

backdrop-filter: blur(<value>);

Примеры

Базовый пример

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

Использование пользовательского значения

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

<div class="backdrop-blur-[2px] ...">  <!-- ... --></div>

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

<div class="backdrop-blur-(--my-backdrop-blur) ...">  <!-- ... --></div>

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

Адаптивный дизайн

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

<div class="backdrop-blur-none md:backdrop-blur-lg ...">  <!-- ... --></div>

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

Кастомизация вашей темы

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

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

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

<div class="backdrop-blur-2xs">  <!-- ... --></div>

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