Styling: layered box shadows

Multiple box shadows

Give one element any number of box shadows: layered, soft, inner and outer together. The field takes the full CSS value, with breakpoints and hover.

636 votes on the Bricks ideas board for Allow multiple box shadows to be applied on an element, as of Oct 15, 2026

#10 of 39 modules by votes

Recording: someone types three shadows into Box shadows (layered), and the flat card lifts like the two beside it.Recorded in Bricks 2.4.3

How to use it

Select any element and open Style > Border.
Leave Bricks' Box shadow empty.
In Box shadows (layered), type the shadows as one CSS value, separated by commas. For example:
```
0 1px 2px rgb(0 0 0 / .08), 0 8px 24px rgb(0 0 0 / .12)
```
To change the shadows on hover or at a breakpoint, switch to that state or breakpoint and enter a new value.

CSS variables from the Style Manager work inside the value.

Style tab > Border, on every element, right after Bricks' own Box shadow. It works in global classes too.

Use Box shadows (layered) instead of Box shadow, not together with it. With both set, only one wins.
The field takes plain text. It does not take dynamic data, and it is not offered for translation in WPML or Polylang.

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

Bricks 2.4 or newer.