About masks

Masking

A mask hides part of a host element based on a shape or transparency levels. Host elements can be images, divs, text containers, and components.

Each element can only have one mask, but you can layer masks by wrapping the host element in a div and applying a mask to the container div. You can also nest another element within the host element and add a mask to the child element.

On this page:

• Mask types
• Selecting masks
• Editing masks
• Animating masks
• Masks in responsive layouts

Mask types

• Image mask
• Gradient mask
• Clip path mask

Browser compatibility

Microsoft Edge versions 40 and older only support rectangle clip path masks. Other mask types and shapes will be ignored.

Image mask

Image masks use the transparent regions of an image to hide the host element.

Host element

Image mask

Result

To add an image mask:

1. Right-click the element that you want to mask.
2. Select Add image mask... from the pop-up menu.
3. Import or select the image you want to use as the mask.

You can adjust the mask's size and position using the Selection tool or the Properties panel.

Note: Image masks cannot use percentage-based positioning.

Gradient mask

Gradient masks hide the host element according to a gradient of transparency levels.

Host element

Gradient mask

Result

Google Web Designer supports both types of gradients for masks:

• Linear gradient
• Radial gradient

To add a gradient mask:

1. Right-click the element that you want to mask.
2. Select Add gradient mask from the pop-up menu.
3. Click the gradient swatch in the Properties panel to customize the gradient type, colors, opacity, and angle (for linear gradients only).

By default, the gradient mask is the same size as the host element, but you can adjust the mask's position and size properties using the Selection tool or the Properties panel.

Note: Gradient masks cannot use percentage-based positioning.

Clip path masks

Clip path masks use a geometric shape to define which part of the host element to show.

Host element

Clip path mask

Result

You can select the type of mask shape by clicking and holding the clip path mask tool in the toolbar until a pop-up menu appears:

Rectangle mask (default)
Oval mask
Polygon mask

Browser compatibility

• Internet Explorer and Microsoft Edge only support clip path masks in rectangle shapes with the position and size specified in pixels. Percentage-based masks and other mask shapes, including rounded corners for rectangle masks, will be ignored.

• Firefox and Safari may not correctly render rectangle masks with rounded corners for large corner radius values (compared to the mask dimensions).

• Safari doesn't support clip path masks on shapes drawn using the Rectangle tool. As a workaround, use a div element instead of a rectangle shape, and place the mask on the div element.

• In Chrome and Opera, clip path masks render incorrectly when the host element contains a 3D-transformed child element.

• Rectangle masks with rounded corners set using a percentage-based radius may render slightly differently in different browsers.

To add a clip path mask:

1. Select the element that you want to mask.
2. Select the mask tool for the desired shape.
3. Set additional options for the mask shape.
   • Rectangle masks 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 masks 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.
4. Draw the mask over the host element.
   • Hold the Shift key while drawing to constrain the mask so it has equal width and height. The Shift key doesn't affect freeform masks 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 mask.

Note: After a polygon mask is drawn, you can drag each vertex to change the mask shape, but you can't change the number of sides.

Polygon mask shapes

	Freeform (draw your own shape)
	Regular polygon (set the number of sides; sides are drawn with equal length)
	Triangle
	Rectangle
	Frame
	Rhombus
	Pentagon
	Hexagon
	Right chevron
	Left chevron
	Cross
	Star
	Right arrow
	Left arrow

Selecting masks

• On the stage: Select the host element, then click the mask. The mask will be outlined in green.

• In the Advanced mode timeline: Select the mask layer beneath the host element layer. Mask layers are indicated by the symbol in front of the layer name.

You can hide and lock mask layers in the Advanced mode timeline to work more easily with the host elements.

Selecting multiple masks

Use Ctrl+click to select multiple mask layers in the Advanced mode timeline in order to delete them all at once. You can't edit more than one mask at a time.

You can only delete a mix of elements and masks if the host elements for the masks are included in the selection.

Editing masks

You can edit masks directly on the stage or by using the Properties panel. CSS properties for masks are unavailable in the CSS panel.

Masks can be edited in the following ways:

• Cut, copy, and paste a mask
• Move a mask
• Resize a mask
• Rotate a mask
• Change an image mask's source
• Change the gradient of a gradient mask
• Change the curvature of a rectangle mask's corners
• Change a polygon mask's shape

Cut, copy, and paste a mask

You can cut or copy and paste a mask to another element, even in another document, by using any of the following methods:

• On the stage or in the Advanced mode timeline:
  • Right-click the mask and select Cut or Copy.
  • Right-click the element that you want to mask and select Paste or Replace mask.
• In the Advanced mode timeline:
  • Drag the mask layer to an element layer to switch the mask to a different host element (not available for replacing a mask).
  • Hold the Alt key while dragging a mask layer to copy the mask to another element (not available for replacing a mask).
• Keyboard shortcuts:
  • Cut - Ctrl+X (Windows) or ⌘+X (Mac)
  • Copy - Ctrl+C (Windows) or ⌘+C (Mac)
  • Paste - Ctrl+V (Windows) or ⌘+V (Mac)
• Menu commands:
  • Edit > Cut
  • Edit > Copy
  • Edit > Paste or Replace mask

Any mask animation will also be pasted.

Limitations on copying and pasting masks

• You can only select a single mask to cut or copy, and a single element to paste the mask to.
• Pasting a mask to an element that already has a mask will replace the existing mask.
• Masks cannot be cut, copied, or pasted in media rules.

Move a mask

Select the mask you want to move, then use one of the following methods:

• Edit the top and left position properties in the Properties panel. These values are relative to the top left corner of the host element.
• Use the arrow keys to move the mask one pixel at a time. Hold the Shift key while pressing an arrow key to move the mask 10 pixels.
• Use the Selection tool to drag the mask with the mouse. Hold the Shift key while dragging to move the mask along a single axis only.

Masks can be positioned outside of their host element's boundaries.

Note: Image masks and gradient masks can't use percentage-based positioning.

Resize a mask

Select the mask 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 mask without changing its center point.

Rotate a mask

Masks can't be directly rotated, but you can accomplish the same effect by following these steps before adding the mask:

1. Wrap the element that you want to mask.
2. Add the mask to the container div.
3. Rotate the container div. The mask rotates as well.
4. Rotate the original element in the opposite direction.

Change an image mask's source

You can swap the image used for an image mask by following these steps:

1. Select the mask.
2. In the Properties panel, click the Set image mask button in the Source field.
3. Select an image from the Library, or click the Import assets button to use another image.
4. Click OK.

Change the gradient of a gradient mask

You can customize the gradient used for a gradient mask.

1. Select the mask.
2. In the Properties panel, click the gradient swatch.
3. Edit the gradient:
   • Gradient type: Select the Linear gradient or Radial gradient button.
   • Transition distance: Drag a transparency marker along the top of the gradient bar to change the transition distance.
   • Transparency: Transparency markers set the opacity level at a particular point along the gradient. 100% indicates that the host element is fully visible and 0% indicates that the host element is fully hidden. Click a transparency marker to edit its opacity level in the percentage field to the right.
   • Additional transparency markers: To add more transparency markers, click the gradient bar. To remove a transparency marker, drag it downward.
   • Angle: For linear gradients, you can adjust the angle.
   • Default: Click the Default gradient button to reset the gradient to default settings (a linear gradient from 0% to 100% at 90 degrees).

Change the curvature of a rectangle mask's corners

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

1. Select the mask.
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 mask's shape

You can adjust the shape of a polygon mask on the stage:

1. Select the mask.
2. Select the Polygon mask 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 mask.

Animating masks

You can animate the size and position of a mask. You can also use visibility ranges to control when a mask appears or disappears. Mask animation is independent of any animation for the host element.

An animated oval mask

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

Masks cannot be edited at multiple frames. Select one keyframe at a time to edit mask animation.

Note: When animating image masks at slower speeds, a jittering effect may be noticeable because fractional pixel values between keyframes are rounded.

Browser compatibility

Clip path mask animation won't play in Safari if your document contains <canvas> elements, such as for the Transition Gallery, Image Effect, or Particle Effects component.

Masks in responsive layouts

Media rules let you override mask properties and animation for specific viewport size ranges. For image masks, you can also override the source to use a different image. For gradient masks, you can change the gradient.

Note: Removing the override for a position or size property automatically resets both position properties (top and left) or both size properties (width and height). For clip path masks, all position and size properties will reset.