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

Filter: OFF

Filter: ON

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