Kiln for Bricks Buy Kiln

Modules / Styling

Styling: drop shadow

Drop shadow filter

Add a shadow that follows the visible shape of a transparent PNG, an SVG or an icon, instead of the element's rectangular box. It works with breakpoints and hover.

#18 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 18 of 39, ranked by votes · Recording in progress

Where to find it in the builder

Style tab > CSS, on every element, in a Drop shadow block after Bricks' CSS Filters. Each field works per breakpoint and in hover states, and in global classes.

How to use it

  1. Select an element, such as an Image with a transparent PNG, an SVG or an icon, and open Style > CSS.
  2. In the Drop shadow block, set any of Offset X, Offset Y, Blur and Color.
  3. Leave the other fields empty to keep their defaults: offset X of 0px, offset Y of 4px, blur of 8px and a faint black (rgb(0 0 0 / 0.3)).

Setting any one field switches the shadow on with the defaults for the rest.

Limits

  • Do not combine it with CSS Filters on the same element. Bricks prints its own filter as one filter: declaration, and only one declaration can win. To use both, put one on a wrapper element.

Settings

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

Requirements

Bricks 2.4 or newer.