Filters

Backdrop Brightness Filter

Utilities for sets filter backdrop brightness effect to an element.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
backdrop-filter `{brightness}`	backdrop-filter: brightness(var(--brightness)) contrast(var(--contrast)) saturate(var(--saturate)) blur(var(--blur))

class	css
brightness-0	--backdrop-brightness: 0
brightness-1	--backdrop-brightness: 1
brightness-2	--backdrop-brightness: 1.10
brightness-3	--backdrop-brightness: 1.20
brightness-4	--backdrop-brightness: 1.30
brightness-5	--backdrop-brightness: 1.40
brightness-6	--backdrop-brightness: 1.50
brightness-7	--backdrop-brightness: 1.60
brightness-8	--backdrop-brightness: 1.70
brightness-9	--backdrop-brightness: 1.80
brightness-10	--backdrop-brightness: 1.90

Usage

Filter: OFF

Filter: ON

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

<div class="width-48 height-48" style="background-image:url(...)">
  <div class="backdrop-filter brightness-10 ... bg-tint-granite-5 bg-opacity-50 ... width-32 height-32">
    ...
  </div>
</div>

HTML

.dummy-image {
  @extend
    .width-48,
    .height-48;
}
.dummy-backdrop-blur {
  @extend
    .backdrop-filter,
    .brightness-10,
    .bg-tint-granite-5,
    .bg-opacity-50,
    .width-32,
    .height-32;
}

SCSS

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

<div class="width-48 height-48" style="background-image:url(...)">
  <div class="backdrop-filter brightness-10 contrast-1 saturate-1 blur-2 ... bg-tint-granite-5 bg-opacity-50 ... width-32 height-32">
    ...
  </div>
</div>

HTML

.dummy-image {
  @extend
    .width-48,
    .height-48;
}
.dummy-backdrop-blur {
  @extend
    .backdrop-filter,
    .brightness-10,
    .contrast-1,
    .saturate-1,
    .blur-2
    .bg-tint-granite-5,
    .bg-opacity-50,
    .width-32,
    .height-32;
}

SCSS