How can I mask images in Webflow using unique shapes?
TL;DR
- Use SVGs as masks by uploading them, adding your image inside a div, enabling Mask Image in the Style panel, and selecting the SVG as the mask.
- Alternatively, use styled divs (e.g., circles) as masks by placing the image inside the shape div with overflow set to hidden.
- For advanced control, embed SVGs with clip paths manually using custom code.
To mask images using custom or unique shapes in Webflow, you need to use the Mask feature with either vector SVGs or shape divs.
1. Use an SVG as a Mask
- Upload your SVG shape (e.g. a star, blob, custom cutout) to the Assets panel.
- Add a Div Block to the canvas and give it a class (e.g.,
mask-container). - Drag an Image element into the div and assign your desired image.
- Select the container div, go to the Style panel, and scroll to Effects > Mask.
- Enable Mask Image and choose your uploaded SVG shape from the Assets panel.
- Set the Mask type to Alpha or Luminance based on your SVG’s transparency or color.
2. Use a Shape Div as a Mask
- If the shape is simple (e.g., oval, circle, angled div), you can create it using a Div with styling (e.g., border-radius, transform).
- Place the shape div above the image, and set its Overflow to Hidden.
- Nest the image inside the shape div.
- Resize and position the image within the div so it fits the masked area.
3. Use Clipping Paths (Optional Advanced Technique)
- Create a custom SVG with a clipping path in a design tool like Illustrator or Figma.
- Upload that SVG as an embed element in Webflow.
- Wrap the image with the clipPath using embedded SVG tags (Note: This involves custom code and is not fully no-code within Webflow).
Summary
To mask images in Webflow with unique shapes, you can either use SVG files as masks via the Mask Image option, or use simple div shapes with overflow hidden to simulate a mask. For full control, SVGs with custom clipping paths offer advanced options, though they require manual embedding.