Kiln for Bricks Buy Kiln

Modules / Styling

Styling: masks & background patterns

Masks and background patterns

Mask any element with one of Bricks' 36 shapes, an image or an edge fade. Or draw a CSS pattern behind it: dots, grid, lines, diagonal lines or a checker. Both work with breakpoints and hover.

#8 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
Recording: someone searches the mask shape list for “drop” and the vase image takes the drop shape.Recorded in Bricks 2.4.3

How to use it

A mask

  1. Select any element and open Style > Background.
  2. In the Mask block, use one of the three sources:
    • Shape: pick one of the 36 shapes. The list is searchable. The shapes are the ones Bricks ships for its Image element.
    • Image URL: the address of a file on this site, such as an SVG or PNG from the Media Library.
    • Fade out at: Top, Bottom, Left, Right, Top and bottom, Left and right or All edges (radial). Set Fade length to change how far the fade reaches. The default is 20%.
  3. For a shape or an image, set Size (Contain, Cover or Stretch), Position (Center, Top, Bottom, Left or Right) and Repeat (No repeat, Repeat, Repeat horizontally or Repeat vertically). The defaults are Contain, Center and No repeat. You do not have to touch them.
  4. To turn the mask off at one breakpoint or state, tick Remove mask. For example, masked on desktop and plain on mobile.

A pattern

  1. In the Pattern block, pick a Pattern: Dots, Grid, Horizontal lines, Vertical lines, Diagonal lines or Checker.
  2. Set Pattern color and Pattern size. The defaults are a faint black (rgb(0 0 0 / 0.12)) and 16px.
  3. To turn the pattern off at one breakpoint or state, choose Off (at this breakpoint / state).

Where it appears in Bricks

Style tab > Background, on every element, core and third-party. The controls come with Bricks' own breakpoint, hover and state handling, so you can set them per breakpoint, in a hover state and in global classes.

How it works with Bricks' own settings

  • A mask draws with the CSS mask properties. Use one of Shape, Image URL or Fade out at on an element. Do not combine them with a mask from another source on the same element, such as the mask setting of the Image element.
  • A pattern is drawn as the element's background image. Do not combine it with a background image or gradient on the same element. The element's background color shows through the pattern.

Limits

  • An image from another domain, or a wrong URL, hides the whole element. Browsers load masks with CORS, so use a file from this site.
  • Masks use the unprefixed CSS properties, so they need Chromium 120 or newer, Safari 15.4 or newer, or Firefox 53 or newer.
  • Kiln registers its custom properties with @property so a child element does not inherit its parent's values. Safari before 16.4 and Firefox before 128 do not support that.
  • The Image URL field takes plain text. It does not take dynamic data and is not offered for translation in WPML or Polylang.
  • The masks and patterns add about 0.85 MB to the data the builder loads, measured with 130 elements registered. It compresses well. Turn the module off in Bricks > Kiln if you do not use it.

Settings

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

Requirements

Bricks 2.4 or newer.