Kiln for Bricks Buy Kiln

Modules / Styling

Styling: backdrop filter

Backdrop filter

Blur, saturate and brighten whatever sits behind an element, for a frosted-glass look. It works on every element, with breakpoints and hover.

#27 of 39 modules by votes

  • On by default
  • Needs Bricks 2.4 or newer
  • Tested with Bricks 2.4.3
Buy Kiln · all 39 modules, US$79 a yearBrowse the other 38 modules

Tile 27 of 39, ranked by votes · Recording in progress

Where to find it in the builder

Style tab > CSS, on every element, in a Styling: backdrop filter block after Bricks' CSS Filters. It works in global classes too.

How to use it

  1. Give the element a semi-transparent background. Without one, the effect does not show.
  2. Open Style > CSS and find the Styling: backdrop filter block.
  3. Set Blur with a unit. The default is 0px.
  4. Optionally set Saturate and Brightness as percentages. Both default to 100, which leaves the backdrop unchanged.

Each field works alone. A value you set only at one breakpoint or on hover still combines with the others.

Limits

  • Like any filter, it makes fixed-position children position against this element. A mobile menu inside a sticky header is the usual case.
  • Kiln also writes the -webkit- prefixed property, for Safari before version 18.
  • Blur, Saturate and Brightness accept values of 0 or more.

Settings

None. Turn the module on in Bricks > Kiln (it is on by default).

Requirements

Bricks 2.4 or newer.