Press/to search

Filters

Brightness v1.0.9

Utilities for sets brightness filter to an element.


Class

classcss
filter {brightness}filter: brightness(var(--brightness)) contrast(var(--contrast)) saturate(var(--saturate)) blur(var(--blur)) drop-shadow(var(--drop-shadow))
classcss
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

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>

Customization

Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.

// Add Values
@include yogurt(
$class: 'filter.brightness',
$property: --brightness,
$modifier: (
1: 1.10,
2: 2.20
//...
)
);

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.