Filters

Brightness v1.0.9

Utilities for sets brightness filter to an element.

Class

Usage

Filter: OFFFilter: ON

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