Filters
Brightness v1.0.9
Utilities for sets brightness filter to an element.
Class
class | css |
---|---|
filter {brightness} | filter: brightness(var(--brightness)) contrast(var(--contrast)) saturate(var(--saturate)) blur(var(--blur)) drop-shadow(var(--drop-shadow)) |
class | css |
---|---|
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
Apply the filter
class first, and then set the filter in any order when with other filters.
<!-- Example -->
<img class="filter brightness-10 ..."
src="...">
<y class="filter brightness-10 ..."
style="background-image:url(...)"></y>
Mix with other filters, such as Contrast, Saturate, Blur and Drop Shadow.
<!-- Example -->
<img class="filter brightness-10 contrast-5 saturate-5 blur-5 ..."
src="...">
<y class="filter brightness-10 contrast-5 saturate-5 blur-5 ..."
style="background-image:url(...)"></y>
Customize More
// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'filter.brightness',
//variant: 'responsive',
property: '--brightness',
modifier: (
'brightness-11': '...',
'brightness-12': '...'
//...
)
)
)
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |