Backdrop filter mixins

Provides utility classes and mixins for backdrop-filter effects.

All utilities come with responsive variants.

Filter classes (.backdrop-blur-*, .backdrop-brightness-*, .backdrop-hue-rotate-*, etc.) only set a --wu-backdrop-* variable; .backdrop-layer writes the backdrop-filter property that combines them, so both classes are required.

Presets (.backdrop-frosted, .backdrop-glass, etc.) and .backdrop-none set backdrop-filter directly and work alone.

<div class="backdrop-layer backdrop-blur-md">Blurred backdrop</div>
<div class="backdrop-layer backdrop-blur-md backdrop-brightness-90">Blurred and darkened backdrop</div>
<div class="backdrop-layer backdrop-blur-lg@md">Blurred backdrop on medium screens and up</div>
<div class="backdrop-frosted">Preset, no layer needed</div>

Generated from the doc blocks in the core source when the site is built, so it always matches the current release of @wovenui/core. Every example is compiled against core during the build; open Compiled CSSunder an example to see its output. Guide: Backdrop filters. The A to Z index lists every public mixin and function.

Source: utilities/_backdrop-filters.scss

Mixins

backdrop-filter backdrop-layer backdrop-blur backdrop-brightness backdrop-contrast backdrop-grayscale backdrop-hue-rotate backdrop-invert backdrop-saturate backdrop-sepia backdrop-frosted backdrop-glass backdrop-dark-glass backdrop-crystal backdrop-matte backdrop-none generate-backdrop-filter-utilities

`backdrop-filter` mixin

Sets backdrop-filter to the given value as written, replacing any composed or preset filter.

@mixin backdrop-filter($value)

Parameter	Type	Default	Description
`$value`	`String`	Required	Any backdrop-filter value, such as blur(6px) saturate(140%) or none

Example

.overlay {
  @include backdrop-filter(blur(6px) saturate(140%));
}

Compiled CSS

.overlay {
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:131

`backdrop-layer` mixin

Resets every backdrop filter variable to its identity value and writes the backdrop-filter that combines them; include it before the filter mixins.

A filter mixin included before backdrop-layer in the same rule is reset by it.

@mixin backdrop-layer

Output: Eight --wu-backdrop-* identity values and backdrop-filter: var(--wu-backdrop-blur) ... var(--wu-backdrop-sepia)

Example 1

.overlay {
  @include backdrop-layer;
  @include backdrop-blur(md);
}

Compiled CSS

.overlay {
  --wu-backdrop-blur: blur(0);
  --wu-backdrop-brightness: brightness(100%);
  --wu-backdrop-contrast: contrast(100%);
  --wu-backdrop-grayscale: grayscale(0);
  --wu-backdrop-hue-rotate: hue-rotate(0deg);
  --wu-backdrop-invert: invert(0);
  --wu-backdrop-saturate: saturate(100%);
  --wu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  --wu-backdrop-blur: blur(4px);
}

Example 2

.overlay {
  @include apply(backdrop-layer, backdrop-blur(lg), backdrop-saturate(150%));
}

Compiled CSS

.overlay {
  --wu-backdrop-blur: blur(0);
  --wu-backdrop-brightness: brightness(100%);
  --wu-backdrop-contrast: contrast(100%);
  --wu-backdrop-grayscale: grayscale(0);
  --wu-backdrop-hue-rotate: hue-rotate(0deg);
  --wu-backdrop-invert: invert(0);
  --wu-backdrop-saturate: saturate(100%);
  --wu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  --wu-backdrop-blur: blur(8px);
  --wu-backdrop-saturate: saturate(150%);
}

See also: backdrop-blur, backdrop-none. Source: utilities/_backdrop-filters.scss:180

`backdrop-blur` mixin

Sets the --wu-backdrop-blur variable to blur() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.

@mixin backdrop-blur($value)

Parameter	Type	Default	Description
`$value`	`Number\|String`	Required	A $backdrop-blur-values key (none, sm, md, lg, xl, 2xl), a length in px, rem or em, calc() or var(); anything else raises an error

Example 1

.overlay {
  @include backdrop-layer;
  @include backdrop-blur(md);
}

Compiled CSS

.overlay {
  --wu-backdrop-blur: blur(0);
  --wu-backdrop-brightness: brightness(100%);
  --wu-backdrop-contrast: contrast(100%);
  --wu-backdrop-grayscale: grayscale(0);
  --wu-backdrop-hue-rotate: hue-rotate(0deg);
  --wu-backdrop-invert: invert(0);
  --wu-backdrop-saturate: saturate(100%);
  --wu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  --wu-backdrop-blur: blur(4px);
}

Example 2

.overlay {
  @include apply(backdrop-layer, backdrop-blur(6px));
}

Compiled CSS

.overlay {
  --wu-backdrop-blur: blur(0);
  --wu-backdrop-brightness: brightness(100%);
  --wu-backdrop-contrast: contrast(100%);
  --wu-backdrop-grayscale: grayscale(0);
  --wu-backdrop-hue-rotate: hue-rotate(0deg);
  --wu-backdrop-invert: invert(0);
  --wu-backdrop-saturate: saturate(100%);
  --wu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  --wu-backdrop-blur: blur(6px);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:221

`backdrop-brightness` mixin

Sets the --wu-backdrop-brightness variable to brightness() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.

@mixin backdrop-brightness($value)

Parameter	Type	Default	Description
`$value`	`Number\|String`	Required	A $backdrop-brightness-values key (none, 75, 90, 110, 125, 150; unquoted and quoted numbers both match), a percentage, calc() or var(); anything else raises an error

Example 1

.overlay {
  @include backdrop-layer;
  @include backdrop-brightness(90);
}

Compiled CSS

.overlay {
  --wu-backdrop-blur: blur(0);
  --wu-backdrop-brightness: brightness(100%);
  --wu-backdrop-contrast: contrast(100%);
  --wu-backdrop-grayscale: grayscale(0);
  --wu-backdrop-hue-rotate: hue-rotate(0deg);
  --wu-backdrop-invert: invert(0);
  --wu-backdrop-saturate: saturate(100%);
  --wu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  --wu-backdrop-brightness: brightness(90%);
}

Example 2

.overlay {
  @include apply(backdrop-layer, backdrop-brightness(80%));
}

Compiled CSS

.overlay {
  --wu-backdrop-blur: blur(0);
  --wu-backdrop-brightness: brightness(100%);
  --wu-backdrop-contrast: contrast(100%);
  --wu-backdrop-grayscale: grayscale(0);
  --wu-backdrop-hue-rotate: hue-rotate(0deg);
  --wu-backdrop-invert: invert(0);
  --wu-backdrop-saturate: saturate(100%);
  --wu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  --wu-backdrop-brightness: brightness(80%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:237

`backdrop-contrast` mixin

Sets the --wu-backdrop-contrast variable to contrast() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.

@mixin backdrop-contrast($value)

Parameter	Type	Default	Description
`$value`	`Number\|String`	Required	A $backdrop-contrast-values key (none, 75, 90, 110, 125, 150; unquoted and quoted numbers both match), a percentage, calc() or var(); anything else raises an error

Example 1

.overlay {
  @include backdrop-layer;
  @include backdrop-contrast(125);
}

Compiled CSS

.overlay {
  --wu-backdrop-blur: blur(0);
  --wu-backdrop-brightness: brightness(100%);
  --wu-backdrop-contrast: contrast(100%);
  --wu-backdrop-grayscale: grayscale(0);
  --wu-backdrop-hue-rotate: hue-rotate(0deg);
  --wu-backdrop-invert: invert(0);
  --wu-backdrop-saturate: saturate(100%);
  --wu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  --wu-backdrop-contrast: contrast(125%);
}

Example 2

.overlay {
  @include apply(backdrop-layer, backdrop-contrast(120%));
}

Compiled CSS

.overlay {
  --wu-backdrop-blur: blur(0);
  --wu-backdrop-brightness: brightness(100%);
  --wu-backdrop-contrast: contrast(100%);
  --wu-backdrop-grayscale: grayscale(0);
  --wu-backdrop-hue-rotate: hue-rotate(0deg);
  --wu-backdrop-invert: invert(0);
  --wu-backdrop-saturate: saturate(100%);
  --wu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  --wu-backdrop-contrast: contrast(120%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:253

`backdrop-grayscale` mixin

Sets the --wu-backdrop-grayscale variable to grayscale() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.

@mixin backdrop-grayscale($value)

Parameter	Type	Default	Description
`$value`	`Number\|String`	Required	A $backdrop-grayscale-values key (none, 25, 50, 75, 100; unquoted and quoted numbers both match), a percentage, calc() or var(); anything else raises an error

Example 1

.overlay {
  @include backdrop-layer;
  @include backdrop-grayscale(50);
}

Compiled CSS

.overlay {
  --wu-backdrop-blur: blur(0);
  --wu-backdrop-brightness: brightness(100%);
  --wu-backdrop-contrast: contrast(100%);
  --wu-backdrop-grayscale: grayscale(0);
  --wu-backdrop-hue-rotate: hue-rotate(0deg);
  --wu-backdrop-invert: invert(0);
  --wu-backdrop-saturate: saturate(100%);
  --wu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  --wu-backdrop-grayscale: grayscale(50%);
}

Example 2

.overlay {
  @include apply(backdrop-layer, backdrop-grayscale(30%));
}

Compiled CSS

.overlay {
  --wu-backdrop-blur: blur(0);
  --wu-backdrop-brightness: brightness(100%);
  --wu-backdrop-contrast: contrast(100%);
  --wu-backdrop-grayscale: grayscale(0);
  --wu-backdrop-hue-rotate: hue-rotate(0deg);
  --wu-backdrop-invert: invert(0);
  --wu-backdrop-saturate: saturate(100%);
  --wu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  --wu-backdrop-grayscale: grayscale(30%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:269

`backdrop-hue-rotate` mixin

Sets the --wu-backdrop-hue-rotate variable to hue-rotate() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.

@mixin backdrop-hue-rotate($value)

Parameter	Type	Default	Description
`$value`	`Number\|String`	Required	A $backdrop-hue-rotate-values key (0, 90, 180, 270; unquoted and quoted numbers both match), an angle such as 45deg, calc() or var(); anything else raises an error

Example 1

.overlay {
  @include backdrop-layer;
  @include backdrop-hue-rotate(90);
}

Compiled CSS

.overlay {
  --wu-backdrop-blur: blur(0);
  --wu-backdrop-brightness: brightness(100%);
  --wu-backdrop-contrast: contrast(100%);
  --wu-backdrop-grayscale: grayscale(0);
  --wu-backdrop-hue-rotate: hue-rotate(0deg);
  --wu-backdrop-invert: invert(0);
  --wu-backdrop-saturate: saturate(100%);
  --wu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  --wu-backdrop-hue-rotate: hue-rotate(90deg);
}

Example 2

.overlay {
  @include apply(backdrop-layer, backdrop-hue-rotate(45deg));
}

Compiled CSS

.overlay {
  --wu-backdrop-blur: blur(0);
  --wu-backdrop-brightness: brightness(100%);
  --wu-backdrop-contrast: contrast(100%);
  --wu-backdrop-grayscale: grayscale(0);
  --wu-backdrop-hue-rotate: hue-rotate(0deg);
  --wu-backdrop-invert: invert(0);
  --wu-backdrop-saturate: saturate(100%);
  --wu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  --wu-backdrop-hue-rotate: hue-rotate(45deg);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:285

`backdrop-invert` mixin

Sets the --wu-backdrop-invert variable to invert() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.

@mixin backdrop-invert($value)

Parameter	Type	Default	Description
`$value`	`Number\|String`	Required	A $backdrop-invert-values key (none, 25, 50, 75, 100; unquoted and quoted numbers both match), a percentage, calc() or var(); anything else raises an error

Example 1

.overlay {
  @include backdrop-layer;
  @include backdrop-invert(100);
}

Compiled CSS

.overlay {
  --wu-backdrop-blur: blur(0);
  --wu-backdrop-brightness: brightness(100%);
  --wu-backdrop-contrast: contrast(100%);
  --wu-backdrop-grayscale: grayscale(0);
  --wu-backdrop-hue-rotate: hue-rotate(0deg);
  --wu-backdrop-invert: invert(0);
  --wu-backdrop-saturate: saturate(100%);
  --wu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  --wu-backdrop-invert: invert(100%);
}

Example 2

.overlay {
  @include apply(backdrop-layer, backdrop-invert(10%));
}

Compiled CSS

.overlay {
  --wu-backdrop-blur: blur(0);
  --wu-backdrop-brightness: brightness(100%);
  --wu-backdrop-contrast: contrast(100%);
  --wu-backdrop-grayscale: grayscale(0);
  --wu-backdrop-hue-rotate: hue-rotate(0deg);
  --wu-backdrop-invert: invert(0);
  --wu-backdrop-saturate: saturate(100%);
  --wu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  --wu-backdrop-invert: invert(10%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:301

`backdrop-saturate` mixin

Sets the --wu-backdrop-saturate variable to saturate() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.

@mixin backdrop-saturate($value)

Parameter	Type	Default	Description
`$value`	`Number\|String`	Required	A $backdrop-saturate-values key (none, 50, 75, 125, 150, 200; unquoted and quoted numbers both match), a percentage, calc() or var(); anything else raises an error

Example 1

.overlay {
  @include backdrop-layer;
  @include backdrop-saturate(150);
}

Compiled CSS

.overlay {
  --wu-backdrop-blur: blur(0);
  --wu-backdrop-brightness: brightness(100%);
  --wu-backdrop-contrast: contrast(100%);
  --wu-backdrop-grayscale: grayscale(0);
  --wu-backdrop-hue-rotate: hue-rotate(0deg);
  --wu-backdrop-invert: invert(0);
  --wu-backdrop-saturate: saturate(100%);
  --wu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  --wu-backdrop-saturate: saturate(150%);
}

Example 2

.overlay {
  @include apply(backdrop-layer, backdrop-saturate(180%));
}

Compiled CSS

.overlay {
  --wu-backdrop-blur: blur(0);
  --wu-backdrop-brightness: brightness(100%);
  --wu-backdrop-contrast: contrast(100%);
  --wu-backdrop-grayscale: grayscale(0);
  --wu-backdrop-hue-rotate: hue-rotate(0deg);
  --wu-backdrop-invert: invert(0);
  --wu-backdrop-saturate: saturate(100%);
  --wu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  --wu-backdrop-saturate: saturate(180%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:317

`backdrop-sepia` mixin

Sets the --wu-backdrop-sepia variable to sepia() with a configured key or a validated raw value; it has no visible effect without backdrop-layer.

@mixin backdrop-sepia($value)

Parameter	Type	Default	Description
`$value`	`Number\|String`	Required	A $backdrop-sepia-values key (none, 25, 50, 75, 100; unquoted and quoted numbers both match), a percentage, calc() or var(); anything else raises an error

Example 1

.overlay {
  @include backdrop-layer;
  @include backdrop-sepia(50);
}

Compiled CSS

.overlay {
  --wu-backdrop-blur: blur(0);
  --wu-backdrop-brightness: brightness(100%);
  --wu-backdrop-contrast: contrast(100%);
  --wu-backdrop-grayscale: grayscale(0);
  --wu-backdrop-hue-rotate: hue-rotate(0deg);
  --wu-backdrop-invert: invert(0);
  --wu-backdrop-saturate: saturate(100%);
  --wu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  --wu-backdrop-sepia: sepia(50%);
}

Example 2

.overlay {
  @include apply(backdrop-layer, backdrop-sepia(20%));
}

Compiled CSS

.overlay {
  --wu-backdrop-blur: blur(0);
  --wu-backdrop-brightness: brightness(100%);
  --wu-backdrop-contrast: contrast(100%);
  --wu-backdrop-grayscale: grayscale(0);
  --wu-backdrop-hue-rotate: hue-rotate(0deg);
  --wu-backdrop-invert: invert(0);
  --wu-backdrop-saturate: saturate(100%);
  --wu-backdrop-sepia: sepia(0);
  -webkit-backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  --wu-backdrop-sepia: sepia(20%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:333

`backdrop-frosted` mixin

Applies the frosted preset (blur(8px) saturate(90%) brightness(120%)) directly to backdrop-filter, so no backdrop-layer is needed.

@mixin backdrop-frosted

Example

.panel {
  @include backdrop-frosted;
}

Compiled CSS

.panel {
  -webkit-backdrop-filter: blur(8px) saturate(90%) brightness(120%);
  backdrop-filter: blur(8px) saturate(90%) brightness(120%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:343

`backdrop-glass` mixin

Applies the glass preset (blur(8px) saturate(120%) contrast(90%)) directly to backdrop-filter, so no backdrop-layer is needed.

@mixin backdrop-glass

Example

.panel {
  @include backdrop-glass;
}

Compiled CSS

.panel {
  -webkit-backdrop-filter: blur(8px) saturate(120%) contrast(90%);
  backdrop-filter: blur(8px) saturate(120%) contrast(90%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:353

`backdrop-dark-glass` mixin

Applies the dark glass preset (blur(8px) saturate(180%) brightness(70%) contrast(90%)) directly to backdrop-filter, so no backdrop-layer is needed.

@mixin backdrop-dark-glass

Example

.panel {
  @include backdrop-dark-glass;
}

Compiled CSS

.panel {
  -webkit-backdrop-filter: blur(8px) saturate(180%) brightness(70%) contrast(90%);
  backdrop-filter: blur(8px) saturate(180%) brightness(70%) contrast(90%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:363

`backdrop-crystal` mixin

Applies the crystal preset (blur(8px) saturate(150%)) directly to backdrop-filter, so no backdrop-layer is needed.

@mixin backdrop-crystal

Example

.panel {
  @include backdrop-crystal;
}

Compiled CSS

.panel {
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:373

`backdrop-matte` mixin

Applies the matte preset (blur(20px) saturate(90%) brightness(90%)) directly to backdrop-filter, so no backdrop-layer is needed.

@mixin backdrop-matte

Example

.panel {
  @include backdrop-matte;
}

Compiled CSS

.panel {
  -webkit-backdrop-filter: blur(20px) saturate(90%) brightness(90%);
  backdrop-filter: blur(20px) saturate(90%) brightness(90%);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:383

`backdrop-none` mixin

Removes the backdrop filter and returns the --wu-backdrop-* variables to their identity values, so a later composed filter stays valid.

@mixin backdrop-none

Example

.panel {
  @include backdrop-none;
}

Compiled CSS

.panel {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  --wu-backdrop-blur: blur(0);
  --wu-backdrop-brightness: brightness(100%);
  --wu-backdrop-contrast: contrast(100%);
  --wu-backdrop-grayscale: grayscale(0);
  --wu-backdrop-hue-rotate: hue-rotate(0deg);
  --wu-backdrop-invert: invert(0);
  --wu-backdrop-saturate: saturate(100%);
  --wu-backdrop-sepia: sepia(0);
}

See also: backdrop-layer. Source: utilities/_backdrop-filters.scss:393

`generate-backdrop-filter-utilities` mixin

Emits the backdrop utility classes (layer, filters, presets, none), with an @breakpoint suffix when a breakpoint is given.

@mixin generate-backdrop-filter-utilities($breakpoint: null)

Parameter	Type	Default	Description
`$breakpoint`	`String\|Null`	`null`	Breakpoint name used as the class suffix; place the call inside the matching media query

Output: Classes such as .backdrop-layer@md, .backdrop-blur-md@md and .backdrop-frosted@md

Example

@media (min-width: 768px) {
  @include generate-backdrop-filter-utilities(md);
}

Compiled CSS

@media (min-width: 768px) {
  :where(.backdrop-layer\@md) {
    --wu-backdrop-blur: blur(0);
    --wu-backdrop-brightness: brightness(100%);
    --wu-backdrop-contrast: contrast(100%);
    --wu-backdrop-grayscale: grayscale(0);
    --wu-backdrop-hue-rotate: hue-rotate(0deg);
    --wu-backdrop-invert: invert(0);
    --wu-backdrop-saturate: saturate(100%);
    --wu-backdrop-sepia: sepia(0);
  }
  .backdrop-layer\@md {
    -webkit-backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
    backdrop-filter: var(--wu-backdrop-blur) var(--wu-backdrop-brightness) var(--wu-backdrop-contrast) var(--wu-backdrop-grayscale) var(--wu-backdrop-hue-rotate) var(--wu-backdrop-invert) var(--wu-backdrop-saturate) var(--wu-backdrop-sepia);
  }
  .backdrop-none\@md {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    --wu-backdrop-blur: blur(0);
    --wu-backdrop-brightness: brightness(100%);
    --wu-backdrop-contrast: contrast(100%);
    --wu-backdrop-grayscale: grayscale(0);
    --wu-backdrop-hue-rotate: hue-rotate(0deg);
    --wu-backdrop-invert: invert(0);
    --wu-backdrop-saturate: saturate(100%);
    --wu-backdrop-sepia: sepia(0);
  }
  .backdrop-blur-none\@md {
    --wu-backdrop-blur: blur(0);
  }
  .backdrop-blur-sm\@md {
    --wu-backdrop-blur: blur(2px);
  }
  .backdrop-blur-md\@md {
    --wu-backdrop-blur: blur(4px);
  }
  .backdrop-blur-lg\@md {
    --wu-backdrop-blur: blur(8px);
  }
  .backdrop-blur-xl\@md {
    --wu-backdrop-blur: blur(16px);
  }
  .backdrop-blur-2xl\@md {
    --wu-backdrop-blur: blur(32px);
  }
  .backdrop-brightness-none\@md {
    --wu-backdrop-brightness: brightness(100%);
  }
  .backdrop-brightness-75\@md {
    --wu-backdrop-brightness: brightness(75%);
  }
  .backdrop-brightness-90\@md {
    --wu-backdrop-brightness: brightness(90%);
  }
  .backdrop-brightness-110\@md {
    --wu-backdrop-brightness: brightness(110%);
  }
  .backdrop-brightness-125\@md {
    --wu-backdrop-brightness: brightness(125%);
  }
  .backdrop-brightness-150\@md {
    --wu-backdrop-brightness: brightness(150%);
  }
  .backdrop-contrast-none\@md {
    --wu-backdrop-contrast: contrast(100%);
  }
  .backdrop-contrast-75\@md {
    --wu-backdrop-contrast: contrast(75%);
  }
  .backdrop-contrast-90\@md {
    --wu-backdrop-contrast: contrast(90%);
  }
  .backdrop-contrast-110\@md {
    --wu-backdrop-contrast: contrast(110%);
  }
  .backdrop-contrast-125\@md {
    --wu-backdrop-contrast: contrast(125%);
  }
  .backdrop-contrast-150\@md {
    --wu-backdrop-contrast: contrast(150%);
  }
  .backdrop-grayscale-none\@md {
    --wu-backdrop-grayscale: grayscale(0);
  }
  .backdrop-grayscale-25\@md {
    --wu-backdrop-grayscale: grayscale(25%);
  }
  .backdrop-grayscale-50\@md {
    --wu-backdrop-grayscale: grayscale(50%);
  }
  .backdrop-grayscale-75\@md {
    --wu-backdrop-grayscale: grayscale(75%);
  }
  .backdrop-grayscale-100\@md {
    --wu-backdrop-grayscale: grayscale(100%);
  }
  .backdrop-saturate-none\@md {
    --wu-backdrop-saturate: saturate(100%);
  }
  .backdrop-saturate-50\@md {
    --wu-backdrop-saturate: saturate(50%);
  }
  .backdrop-saturate-75\@md {
    --wu-backdrop-saturate: saturate(75%);
  }
  .backdrop-saturate-125\@md {
    --wu-backdrop-saturate: saturate(125%);
  }
  .backdrop-saturate-150\@md {
    --wu-backdrop-saturate: saturate(150%);
  }
  .backdrop-saturate-200\@md {
    --wu-backdrop-saturate: saturate(200%);
  }
  .backdrop-sepia-none\@md {
    --wu-backdrop-sepia: sepia(0);
  }
  .backdrop-sepia-25\@md {
    --wu-backdrop-sepia: sepia(25%);
  }
  .backdrop-sepia-50\@md {
    --wu-backdrop-sepia: sepia(50%);
  }
  .backdrop-sepia-75\@md {
    --wu-backdrop-sepia: sepia(75%);
  }
  .backdrop-sepia-100\@md {
    --wu-backdrop-sepia: sepia(100%);
  }
  .backdrop-hue-rotate-0\@md {
    --wu-backdrop-hue-rotate: hue-rotate(0deg);
  }
  .backdrop-hue-rotate-90\@md {
    --wu-backdrop-hue-rotate: hue-rotate(90deg);
  }
  .backdrop-hue-rotate-180\@md {
    --wu-backdrop-hue-rotate: hue-rotate(180deg);
  }
  .backdrop-hue-rotate-270\@md {
    --wu-backdrop-hue-rotate: hue-rotate(270deg);
  }
  .backdrop-invert-none\@md {
    --wu-backdrop-invert: invert(0);
  }
  .backdrop-invert-25\@md {
    --wu-backdrop-invert: invert(25%);
  }
  .backdrop-invert-50\@md {
    --wu-backdrop-invert: invert(50%);
  }
  .backdrop-invert-75\@md {
    --wu-backdrop-invert: invert(75%);
  }
  .backdrop-invert-100\@md {
    --wu-backdrop-invert: invert(100%);
  }
  .backdrop-frosted\@md {
    -webkit-backdrop-filter: blur(8px) saturate(90%) brightness(120%);
    backdrop-filter: blur(8px) saturate(90%) brightness(120%);
  }
  .backdrop-glass\@md {
    -webkit-backdrop-filter: blur(8px) saturate(120%) contrast(90%);
    backdrop-filter: blur(8px) saturate(120%) contrast(90%);
  }
  .backdrop-dark-glass\@md {
    -webkit-backdrop-filter: blur(8px) saturate(180%) brightness(70%) contrast(90%);
    backdrop-filter: blur(8px) saturate(180%) brightness(70%) contrast(90%);
  }
  .backdrop-crystal\@md {
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    backdrop-filter: blur(8px) saturate(150%);
  }
  .backdrop-matte\@md {
    -webkit-backdrop-filter: blur(20px) saturate(90%) brightness(90%);
    backdrop-filter: blur(20px) saturate(90%) brightness(90%);
  }
}

Source: utilities/_backdrop-filters.scss:406

Backdrop filter mixins

Mixins

backdrop-filter mixin

backdrop-layer mixin

backdrop-blur mixin

backdrop-brightness mixin

backdrop-contrast mixin

backdrop-grayscale mixin

backdrop-hue-rotate mixin

backdrop-invert mixin

backdrop-saturate mixin

backdrop-sepia mixin

backdrop-frosted mixin

backdrop-glass mixin

backdrop-dark-glass mixin

backdrop-crystal mixin

backdrop-matte mixin

backdrop-none mixin

generate-backdrop-filter-utilities mixin

`backdrop-filter` mixin

`backdrop-layer` mixin

`backdrop-blur` mixin

`backdrop-brightness` mixin

`backdrop-contrast` mixin

`backdrop-grayscale` mixin

`backdrop-hue-rotate` mixin

`backdrop-invert` mixin

`backdrop-saturate` mixin

`backdrop-sepia` mixin

`backdrop-frosted` mixin

`backdrop-glass` mixin

`backdrop-dark-glass` mixin

`backdrop-crystal` mixin

`backdrop-matte` mixin

`backdrop-none` mixin

`generate-backdrop-filter-utilities` mixin