A mask lets you show a component only inside the outline of another one. It is the easiest way to crop a photo into a circle, put an image inside a custom SVG shape, or fill text with a picture.
Masks work in both designers - the Simple Editor and the Advanced Editor - and the steps below are the same in each of them. The two differ only in which components can be used as the mask itself (see Masks in the Advanced Editor). Templates built in the HTML editor don't support masks; there you clip elements with CSS instead. See Template editor for an overview of both designers.
Applying a mask
- Add the component you want to clip (for example an image) and, on top of it, the shape that should define the visible area: a rectangle, a circle, or - in the Simple Editor - an SVG shape or a text.
- Select both components at once: hold Shift and click them on the canvas, or Shift-click them in the components list.
- In the Inspector click Use top shape as mask.
The component that is higher in the layer order becomes the mask, and the component below it is clipped to the mask's outline. Everything outside the shape becomes transparent. If the wrong component was used as the mask, remove the mask, use the blue arrows in the components list to change the order, and apply it again.
Once applied, the mask shape is no longer a separate element: it disappears from the canvas and from the components list and is stored inside the clipped component. It keeps exactly the position, size and rotation it had on the canvas, and from now on it moves, scales and rotates together with the clipped component, so you can drag the masked image around as a single element.
Rules and tips
- Exactly two components must be selected. The artboard can't be part of a mask.
- Only the outline of the mask matters. Its fill color is not rendered, so you can use any color while designing.
- In the Simple Editor any component can be a mask, but shapes, SVG shapes and text give the most predictable results. In the Advanced Editor the mask must be a rectangle or a circle.
- The mask is saved with the template and applied every time the template is rendered through the API, so a merge tag that replaces the masked image will still be clipped to the same shape.
Masks in the Advanced Editor
The Advanced Editor clips components with CSS, so a mask there has to be a shape the browser can describe: use a rectangle (including its corner radius) or a circle. Images, text, custom SVG shapes and other components can be masked, but they can't act as the mask - the Use top shape as mask button stays disabled until one of the two selected components is a rectangle or a circle.
Everything else behaves as in the Simple Editor: the shape is consumed, stored inside the clipped component, moves and scales with it, and comes back unchanged when the mask is removed. Because the mask is stored as proportions of the clipped component, resizing that component keeps the mask aligned - and in video templates the mask stays in place while the element animates.
Removing a mask
Select the masked component and click Remove mask in the Inspector. The mask shape is put back on the canvas exactly where it was visible, becomes selected, and can be moved, resized or replaced. To adjust a mask, remove it, change the shape, and apply it again.