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 centre 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 that 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
   • Greyscale
   • Hue rotate
   • Invert
   • Opacity
   • Saturate
   • Sepia

List of backdrop filters

Blur

Applies a blur to the background.

Configuration options

• Radius – Sets the radius of the blur from 0 px to 100 px.

Brightness

Makes the background brighter or less bright.

Configuration options

• Percentage – 0% makes the background black, while 100% leaves the background unchanged. The maximum percentage is 1,000%.

Contrast

Adjusts the contrast of the background.

Configuration options

• Percentage – 0% makes the background grey, while 100% leaves the background unchanged. The maximum percentage is 1,000%.

Drop Shadow

Adds a Drop Shadow to the background. This effect may only be visible when combined with another backdrop filter, or if the parent element is partially transparent.

Configuration options

• Offset x – The horizontal distance to the Drop Shadow, from -100 px to 100 px.
• Offset y – The vertical distance to the Drop Shadow, from -100 px to 100 px.
• Radius – The shadow's blur, from 0 px to 100 px.
• Colour – the shadow's colour.

Greyscale

Converts the background to greyscale.

Configuration options

• Percentage – 0% leaves the background unchanged, while 100% makes the background completely greyscale.

Hue rotate

Adjusts the colours of the background.

Configuration options

• Angle – the number of degrees to rotate around the colour wheel, from 0° to 360°.

Invert

Inverts the colours of the background.

Configuration options

• Percentage – 0% leaves the background unchanged, while 100% completely inverts the background's colours. 50% renders as grey.

Opacity

Changes the opacity of the background. This effect may only be visible when combined with another backdrop filter.

Configuration options

• Percentage – 0% makes the background completely transparent, while 100% leaves the background unchanged.

Saturate

Saturates the background.

Configuration options

• Percentage – 0% makes the background completely unsaturated, while 100% leaves the background unchanged. The maximum percentage is 1,000%.

Sepia

Converts the background to sepia.

Configuration options

• Percentage – 0% leaves the background unchanged, while 100% makes the background completely 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 that you want to apply.

Reorder filters

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

To reorder filters:

1. Hover over the name of the filter that 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 that 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 centre 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

Backdrop element animation is only available in video documents.

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

An animated oval 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 are only available in image ads.

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 coloured yellow.

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