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