Backdrop filters

Use the backdrop tool to draw a backdrop element and apply CSS filter effects to the area behind the element.

The backdrop tool is only available for video ads and image ads.

Backdrop elements must be at least partially transparent in order for the backdrop filter effect on the background to be visible. By default, new backdrop elements are created with an opacity level of 0.5. You can change this level to adjust the strength of the backdrop filter effect.

To add a backdrop element:

1. Select the backdrop element shape by clicking and holding the Backdrop tool in the toolbar until a pop-up menu appears:
   • Rectangle
   • Oval
   • Polygon
2. Set additional options for the backdrop shape.
   • Rectangle only: For rounded corners, set the corner radius in the tool options bar at the top. Use the Keep identical button to use the same radius for all four corners.
   • Polygon only: Select the shape that you want from the tool options bar at the top. Use the Freeform option to draw your own shape. If you select the Regular Polygon option, enter the number of polygon sides that you want.
3. Draw the backdrop element.
   • Hold the Shift key while drawing to constrain the element so it has equal width and height. The Shift key doesn't affect freeform elements or certain preset shapes which instead will always be drawn with sides of equal length: Triangle, Rhombus, Pentagon, Hexagon, and Star.
   • Hold the Alt key to use the initial drawing position as the center point of the element.
   • After a polygon backdrop is drawn, you can drag each vertex to change the backdrop shape, but you can't change the number of sides.
4. In the CSS Effects panel, configure the backdrop filter you want to apply. By default, the blur filter is added to a new backdrop element. The following filters are available:
   • Blur
   • Brightness
   • Contrast
   • Drop shadow
   • Grayscale
   • Hue rotate
   • Invert
   • Opacity
   • Saturate
   • Sepia

List of backdrop filters

Blur Brightness Contrast Drop shadow Grayscale Hue rotate Invert Opacity Saturate Sepia

Add another filter

Backdrop elements can have multiple filters. To add another filter:

1. Select the backdrop element.
2. In the CSS Effects panel, click Add backdrop filters.
3. Select the filter you want to apply.

Reorder filters

If multiple filters apply to the same backdrop element, they are applied in order that they appear in the CSS Effects panel.

To reorder filters:

1. Hover over the name of the filter you want to reorder. Three dots appear.
2. Using the dots as a handle, drag and drop the filter to where you want it in the panel.

Hide a filter

You can hide a filter so that its effect won't appear on the stage, in previews, or in published files.

To hide a filter:

1. Hover over the filter name.
2. Click the Hide icon.
3. To show the filter again, click the Show icon.

The controls for hidden filters can't be edited.

Delete a filter

To delete a filter:

1. Hover over the filter name.
2. Click the Delete icon.

Editing backdrop elements

You can edit backdrop elements directly on the stage or by using the Properties panel.

Resize a backdrop element

Select the backdrop element you want to resize, then:

• Edit the width and height properties in the Properties panel.
• Use the Selection tool with the Transform control option enabled in the tool options bar at the top.
  • Hold the Shift key while dragging to maintain the aspect ratio.
  • Hold the Alt (Windows) or Option (Mac) key while dragging to resize the backdrop element without changing its center point.

Change the curvature of a rectangle backdrop element's corners

You can change the corners of a rectangle backdrop element to be square or rounded, and adjust the curvature radius of rounded corners.

1. Select the backdrop element.
2. In the Properties panel, adjust the corner radius in either pixels or as a percentage. Setting the radius to 0 makes the corner square.
3. When the Keep identical button is active, the same value applies to all four corners. Deactivate the button to configure each corner separately.

Change a polygon backdrop element's shape

You can adjust the shape of a polygon backdrop element on the stage:

1. Select the polygon backdrop element.
2. Select the Polygon backdrop shape tool from the toolbar. Handles appear at each vertex.
3. Drag each vertex to where you want it.
   • Hold the Shift key while dragging to move the vertex along only a single axis (vertical or horizontal).

Note: You can't change the number of sides for an existing polygon backdrop shape.

Animating backdrop elements

You can animate the size, position, and filter properties of a backdrop element.

For rectangle backdrop elements, you can animate rounded corners. For polygon backdrop elements, you can also animate the element's shape (although not the number of sides) by repositioning the vertices at a keyframe.

Backdrop elements in multi-size layouts

Multi-size layouts let you override backdrop element properties, including filter properties, for specific sizes and size ranges. You can also change the shape of a polygon backdrop element.

When there are backdrop filter overrides, the Backdrop filters label in the Responsive panel is colored yellow.

Like other elements, you can only add or delete backdrop elements when editing the base document.