Filters
Contrast Filter
Utilities for sets contrast 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
class | css |
---|---|
filter {contrast} | 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; |
class | css |
---|---|
contrast-0 | --contrast: 0 |
contrast-1 | --contrast: 1 |
contrast-2 | --contrast: 1.10 |
contrast-3 | --contrast: 1.20 |
contrast-4 | --contrast: 1.30 |
contrast-5 | --contrast: 1.40 |
contrast-6 | --contrast: 1.50 |
contrast-7 | --contrast: 1.60 |
contrast-8 | --contrast: 1.70 |
contrast-9 | --contrast: 1.80 |
contrast-10 | --contrast: 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 contrast-10 ..." src="...">
<div class="filter contrast-10 ..." style="background-image:url(...)"> ... </div>
HTML
.dummy-first-image {
@extend
.filter,
.contrast-10;
}
.dummy-second-image {
@extend
.filter,
.contrast-10;
}
SCSS
Mix with other filters, such as Brightness, Saturate, Blur and Drop Shadow.
<img class="filter contrast-10 brightness-10 saturate-5 blur-5 drop-shadow-md ..." src="...">
<div class="filter contrast-10 brightness-10 saturate-5 blur-5 ..." style="background-image:url(...)"> ... </div>
HTML
.dummy-first-image {
@extend
.filter,
.contrast-10,
.brightness-10,
.saturate-5,
.blur-5,
.drop-shadow-md;
}
.dummy-second-image {
@extend
.filter,
.contrast-10,
.brightness-10,
.saturate-5,
blur-5;
}
SCSS