How can I mask images in Webflow using unique shapes?
TL;DR
- Use CSS
mask-imagewith custom code and PNG masks for static custom shapes. - Use inline SVGs with
clip-pathfor complex or vector-based shapes. - Apply overflow hidden on styled Div Blocks for simple shapes.
- Use Lottie animations for animated or dynamic masking effects.
To mask images in Webflow using unique shapes, use either native CSS masking or SVG clipping techniques depending on the shape and interaction you want.
1. Use the CSS mask-image Property via Custom Code
- Webflow doesn’t natively support
mask-image, but you can apply it using Custom Code and CSS classes. - Create a PNG mask image (black/white) shaped however you want.
- Add your image in a Webflow Image or Div Block with a background image.
- Assign a unique class to the element (e.g.,
.masked-img). - In the Page Settings → Inside </head> tag, add CSS like:
.masked-img { -webkit-mask-image: url('your-mask.png'); mask-image: url('your-mask.png'); -webkit-mask-size: cover; mask-size: cover; }
2. Use SVG Clip Paths for Complex Shapes
- Create your shape using vector tools (e.g., Figma or Illustrator) and export as SVG.
- In Webflow, embed the SVG directly using an Embed Element for better control.
- Insert the SVG manually, and place the image inside a <foreignObject> or <image> tag, or apply the
clip-pathvia CSS targeting your Webflow class. - Example inline in an Embed:
<svg viewBox="0 0 500 500"><clipPath id="clip"><path d="..."/></clipPath><image xlink:href="image.jpg" clip-path="url(#clip)" ... /></svg>
3. Use Webflow’s Built-In Masking with Div Blocks and Overflow
- Create a Div Block and apply your unique shape using rounded corners, shadows, or blended effects (for basic shapes).
- Set the Overflow: Hidden on the parent div.
- Place the image inside the parent div and position it as needed to fit the shape.
4. Add Lottie Animations as Masks
- For animated masking, export a Lottie JSON file with transparency.
- Add a Lottie element and set your image behind it, matching size and alignment.
- This works best for dynamic effects, not static shapes.
Summary
To mask images in Webflow with unique shapes, use CSS mask-image via custom code, inline SVG clip paths, or Div blocks with overflow hidden for simpler shapes. For animations, use Lottie compositions. Each method lets you control how the image is visually constrained by a non-rectangular shape.
