Filters

Backdrop Brightness v1.1.0

Utilities for sets filter backdrop brightness effect to an element.


Class

classcss
backdrop-filter {brightness}backdrop-filter: brightness(var(--brightness)) contrast(var(--contrast)) saturate(var(--saturate)) blur(var(--blur))
Note: Your browser does not currently support the utilities.
classcss
brightness-0--brightness: 0
brightness-1--brightness: 1
brightness-2--brightness: 1.10
brightness-3--brightness: 1.20
brightness-4--brightness: 1.30
brightness-5--brightness: 1.40
brightness-6--brightness: 1.50
brightness-7--brightness: 1.60
brightness-8--brightness: 1.70
brightness-9--brightness: 1.80
brightness-10--brightness: 1.90

Usage

Filter: OFFFilter: ON

Apply the backdrop-filter class first, and then set the filter in any order when with other filters.

<!-- Example -->
<y style="background-image:url(...)">
<y class="backdrop-filter brightness-5 ... bg-gray-100 bg-opacity-50">
...
</y>
</y>

<y class="relative ...">
<img src="...">
<y class="absolute top-0 left-0">
<y class="backdrop-filter brightness-5 ... bg-gray-100 bg-opacity-50">
...
</y>
</y>
</y>

Mix with other filters, such as Backdrop Contrast, Backdrop Saturate, and Backdrop Blur.

<!-- Example -->
<y style="background-image:url(...)">
<y class="backdrop-filter brightness-5 contrast-1 saturate-1 blur-2 ... bg-gray-100 bg-opacity-50">
...
</y>
</y>

<y class="relative ...">
<img src="...">
<y class="absolute top-0 left-0">
<y class="backdrop-filter brightness-5 contrast-1 saturate-1 blur-2 ... bg-gray-100 bg-opacity-50">
...
</y>
</y>
</y>

Customize More

// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'backdrop.brightness',
//variant: 'responsive',
property: 'filter',
modifier: (
'brightness-11': '...',
'brightness-12': '...'
...
)
)
)

Variant

VariantEnabledResponsive
DefaultYes
Dark Theme
hover
group-hover
focus
focus-within
active
visited
checked
disabled