Press/to search

Filters

Blur v1.0.9

Utility applies a Gaussian blur to the element.


Class

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

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.blur',
$property: --blur,
$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.