Filters
Backdrop Contrast v1.1.0
Utilities for sets filter backdrop contrast effect to an element.
Class
class | css |
---|---|
backdrop-filter {contrast} | backdrop-filter: brightness(var(--brightness)) contrast(var(--contrast)) saturate(var(--saturate)) blur(var(--blur)) |
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
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 contrast-10 ... bg-gray-100 bg-opacity-50">
...
</y>
</y>
<y class="relative ...">
<img src="...">
<y class="absolute top-0 left-0">
<y class="backdrop-filter contrast-10 ... bg-gray-100 bg-opacity-50">
...
</y>
</y>
</y>
Mix with other filters, such as Backdrop Brightness, Backdrop Saturate, and Backdrop Blur.
<!-- Example -->
<y style="background-image:url(...)">
<y class="backdrop-filter contrast-10 brightness-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 contrast-10 brightness-1 saturate-1 blur-2 ... bg-gray-100 bg-opacity-50">
...
</y>
</y>
</y>
Customize More
// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'backdrop.contrast',
//variant: 'responsive',
property: 'filter',
modifier: (
'contrast-11': '...',
'contrast-12': '...'
...
)
)
)
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |