Яркость фона элемента (backdrop-brightness)link

https://dev.ru.simai.io/ru/ui/utility/backdrop-filter/backdrop-filter-brightness.php

Утилита управляет яркостью фона за элементом через backdrop-filter.

Классы и их значенияlink

Описаниеlink

• backdrop-brightness-0 — максимальное затемнение.
• backdrop-brightness-1 — базовая яркость.
• Значения 1/4, 1/3, 1/2 — плавное уменьшение яркости.
• Значения 2, 3, 4 — повышение яркости.
• Поддерживается hover: префикс, например hover:backdrop-brightness-2.

Синтаксисlink

Использование: {контрольная точка}:{модификатор} или просто {модификатор}

• Контрольная точка (необязательный параметр): Применяет модификатор начиная с определённого размера экрана (sm, md, lg, xl). Если не указана, модификатор применяется для всех размеров.

• Модификатор (обязательный параметр): backdrop-brightness-{0|1/4|1/3|1/2|1|2|3|4}

Пример использованияlink

<div class="backdrop-brightness-1 hover:backdrop-brightness-2 p-4 bg-primary color-on-surface-inverse transition">
  Наведи, чтобы увеличить яркость подложки
</div>

Playgroundlink