---
title: "How to Mask an Image in Elementor? (Custom Image Mask)"
url: https://theplusaddons.com/docs/mask-an-image-in-elementor/
date: 2024-05-10
modified: 2026-08-13
lang: en
author: "Aditya Sharma"
description: "Do you want to add a mask to images in Elementor? With masking, you can give images unique custom shapes, turning a square photo into a circle, hexagon, or any..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Mask-an-Image-in-Elementor_-2-1024x536.jpg
word_count: 395
---

# How to Mask an Image in Elementor? (Custom Image Mask)

## 

- The Creative Image widget in The Plus Addons for Elementor includes a Mask Image Shape option that applies any PNG or SVG as a mask directly over the image.
- A custom mask uses a PNG with a transparent background or an SVG file, and the transparent areas define which parts of the image are hidden.
- Mask Position, Mask Repeat, and Mask Size control how the mask aligns on each responsive device, while Image Shadow adds a custom drop shadow behind the masked image.

Do you want to add a mask to images in Elementor? With masking, you can give images unique custom shapes, turning a square photo into a circle, hexagon, or any custom silhouette defined by a PNG or SVG file.

The Creative Image widget in The Plus Addons for Elementor includes a Mask Image Shape option that applies any PNG or SVG as a mask directly over the image.

*To check the complete feature overview documentation of The Plus Addons for Elementor Creative Image widget, [click here](https://theplusaddons.com/docs/creative-image-widget/).*

**Best Used For:**

- Agency and portfolio pages where images need to break out of rectangular layouts- Team or about pages that display circular or custom-shaped profile photos- Feature sections that use shaped images alongside text to create visual interest

***Requirement – This widget is a part of The Plus Addons for Elementor. Make sure it is installed and activated.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/creative-images-for-elementor/)

To apply a custom mask, you need a PNG image with a transparent background or an SVG file in your desired mask shape. The transparent areas in the mask file define which parts of the image are hidden.

Add the Creative Image widget to the page and follow these steps:

1. Select **Creative Image** from the **Image Style** dropdown.

2. Add your main image in the **Choose Image** section.

3. Enable the **Mask Image Shape** toggle in the **Style** tab.

4. Add your mask image in the **Mask Image** section. The mask file defines the shape that is cut from your main image. Use this when your design requires a non-rectangular image shape, such as a circle, diamond, or custom outline. If you also want to add floating image effects in Elementor, see [How to Add Image Animation in Elementor Image Cascading Widget](https://theplusaddons.com/docs/add-image-animation-in-elementor-image-cascading-widget/).

In the **Mask Position**, **Mask Repeat**, and **Mask Size** sections, control how the mask aligns to the image on each responsive device. Set Mask Size to scale the mask shape relative to the image, and use Mask Position to align it if the mask does not center automatically.

In the **Image Shadow** section, add a custom drop shadow behind the masked image. Use this when the masked image sits on a white or light background and needs visible depth without a visible border.

Your image will now appear in the mask shape you chose.

![](https://theplusaddons.com/wp-content/uploads/2024/05/creative-image-mask-image-shape-demo-1.png)

***Suggested Reading***: [*How to Add Image Reveal Animation on Scroll in Elementor*](https://theplusaddons.com/docs/add-image-reveal-animation-on-scroll-in-elementor/)