Masks and clip paths both crop an element in your popup into a custom shape. A mask uses an image file to decide what stays visible. A clip path (sometimes called a clipping path) uses a shape you pick from a library or type in, with no file needed.
š”Note: Masks and clip paths only work on images and containers. If you select text or a button, you won't see these options.
Crop with a mask
A mask uses an image with transparency, such as an SVG, PNG, or WEBP file. Any transparent part of the mask image is hidden on your element.
In the popup editor, select the image or container you want to crop.
In the sidebar, scroll to Mask and expand it.
Select Upload to add a new image, or Library to choose one you've already uploaded.
Under Fit, select Cover to fill the element with the mask, cropping it if needed, or Contain to fit the whole mask inside the element.
If you selected Contain, choose Repeat to tile the mask or No repeat to show it once.
Under Position, select a point on the grid, or enter X and Y values as percentages.
The mask starts at the top-left of the element. Using Contain with Repeat and a small mask image creates a repeating pattern.
Crop with a clip path
In the popup editor, select the image or container you want to crop.
In the sidebar, scroll to Clip path and expand it.
Next to Shape, select Browse to open the Clip path library.
Select a shape. Use Search shapes to find one by name, such as "heart" or "ticket."
Select Use selected.
The library includes circles, ellipses, semicircles, rounded rectangles, pills, triangles, polygons, arrows, stars, badges, cut-corner shapes, and more.
How custom clip path shapes work
The Shape field holds the shape's value, and you can edit it directly. It accepts 4 shape types:
circle(): a circle, for examplecircle(50%).ellipse(): an oval, for exampleellipse(50% 35%).inset(): a rectangle, with optional rounded corners, for exampleinset(0% round 18%).polygon(): any shape made of straight edges.
A polygon is a list of points. Each point is an x value and a y value separated by a space, and points are separated by commas. Values are percentages of the element's width and height, measured from the top-left corner. For example, this triangle has a point at the top center and two at the bottom corners:
polygon(50% 0%, 100% 100%, 0% 100%)
To build a custom shape, start with the closest shape in the library, then adjust its values in the Shape field.
š”Tip: Lia, Alia's built-in AI assistant, can crop elements for you. For example, ask Lia to "crop this image into a circle." See Getting started with Lia.
Masks and clip paths FAQ
I don't see the Mask or Clip path option. Why?
These options only appear when an image or container is selected. Select the image itself, or put the content you want to crop inside a container. If the element uses a shared style, select Edit just this element in the sidebar first.
Should I use a mask or a clip path?
Use a clip path for clean geometric shapes, like circles, stars, or arrows. Use a mask for shapes a clip path can't draw, such as soft edges, logos, or repeating patterns.
Still have questions?
Start a chat from inside the Alia app, or use the chat in our Help Center.