How can I mask images in Webflow using unique shapes?
TL;DR
- Use Webflow’s Clip Path tool for basic or custom polygon shapes by selecting an image or div and applying presets or custom paths.
- For complex shapes, embed custom SVG masks or upload SVG files designed in external tools.
- Create dynamic image masks using Lottie animations layered with overflow-hidden containers.
To mask images in Webflow using unique shapes, you use either the CSS clip-path property or SVG masks. Webflow supports both through its Designer interface, though custom shapes require specific settings.
1. Use Native Webflow Div Shapes (Basic Masking)
- Wrap your image in a Div block.
- Set the image as a Background Image of the Div or keep it as an Image element.
- Apply corner radius (rounding) or overflow: hidden to create basic shapes like circles or rounded rectangles.
- This method is limited to standard geometric shapes.
2. Use clip-path with Custom Shapes
- Select the image or its containing Div.
- Go to Style Panel > Effects > Clip Path.
- Choose from preset shapes like circle, polygon, or inset, or click Custom to set your own.
- For custom polygon shapes, define points directly (e.g., a triangle using polygon(50% 0%, 0% 100%, 100% 100%)).
3. Use SVG Masks for Complex Shapes
- Design your custom shape in software like Figma or Illustrator and export it as an SVG file.
- In Webflow:
- Drag an Embed element onto the canvas.
- Paste your SVG code with a mask or clipping path inside.
- Reference your image inside the SVG, or use the SVG as a mask container that controls a background image.
- Alternatively, upload the SVG as an image, position it absolutely over another image, and use mix-blend-mode creatively—but this won't create a true mask.
4. Use a Lottie Animation as a Mask (Advanced)
- Import a Lottie file with a reveal effect or masking frame.
- Place your image behind the Lottie element in a div with overflow: hidden.
- Use animation to create a dynamic mask effect (e.g., revealing the image as the animation plays).
Summary
To mask images in Webflow with unique shapes, use the Clip Path tool for basic or custom polygons, or embed SVG masks for more complex creative shapes. For dynamic masks, consider Lottie animations or advanced layering techniques.