Filters

Brightness Filter

Utilities for sets brightness filter 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

classcss
filter {brightness}filter: brightness(var(--brightness)) contrast(var(--contrast)) saturate(var(--saturate)) blur(var(--blur)) drop-shadow(var(--drop-shadow)); transition: filter var(--extra-smooth) linear, transform var(--extra-smooth) linear;
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: OFF
Filter: ON

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

<img class="filter brightness-10 ..." src="...">
<div class="filter brightness-10 ..." style="background-image:url(...)"> ... </div>
HTML
.dummy-first-image {
@extend
.filter,
.brightness-10;
}
.dummy-second-image {
@extend
.filter,
.brightness-10;
}
SCSS

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

<img class="filter brightness-10 contrast-5 saturate-5 blur-5 ..." src="...">
<div class="filter brightness-10 contrast-5 saturate-5 blur-5 ..." style="background-image:url(...)"> ... </div>
HTML
.dummy-first-image {
@extend
.filter,
.brightness-10,
.contrast-5,
.saturate-5,
.blur-5;
}
.dummy-second-image {
@extend
.filter,
.brightness-10,
.contrast-5,
.saturate-5,
.blur-5;
}
SCSS