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

Key Takeaways

  • Creative Image widget from The Plus Addons for Elementor allows users to add masks to images.
  • Users need a PNG or SVG image with a transparent background to create a mask shape.
  • The mask image position, repeat, and size can be managed for responsive devices using specific sections.
Table Of Content

Do you want to add a mask to the images in Elementor? With masking, you can give unique shapes to images and make your design stand out from the competition.

With the Creative Image widget from The Plus Addons for Elementor, you can easily add a mask to the images in Elementor.

To check the complete feature overview documentation of The Plus Addons for Elementor Creative Image widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.

To do this you need to have a PNG (with a transparent background) or SVG image in your desired mask shape.

Then add the Creative Image widget to the page and follow the steps.

1. Select Creative Image from the Image Style dropdown.

2. Then add your image in the Choose Image section.

3. Then enable the Mask Image Shape toggle from the Style tab.

4. Finally add the mask image in the Mask Image section.

You can manage the mask image position, repeat and size from Mask Position, Mask Repeat and Mask Size sections respectively for responsive devices.

You can also add a custom drop shadow to the mask from the Image Shadow section.

Now you should see the image in your masked shape.

Creative image mask image shape demo 1 how to mask an image in elementor? (custom image mask) from the plus addons for elementor

Suggested Reading: How to Add Image Reveal Animation on Scroll in Elementor

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if my mask image isn't displaying correctly in Elementor?

If your mask image isn't displaying as expected, ensure that the mask image is a PNG with a transparent background or an SVG. These formats are required for the mask to work properly. Additionally, check the settings for Mask Position, Mask Repeat, and Mask Size to ensure they are optimized for your design. Adjusting these settings can often resolve display issues.

What are the best practices for positioning and sizing the mask image in Elementor?

For optimal results, adjust the Mask Position, Mask Repeat, and Mask Size settings in the Creative Image widget. Positioning the mask correctly ensures it aligns with your main image, while sizing it appropriately can enhance the overall design. Testing these settings on different devices is crucial for responsive design.

Does the Creative Image widget support animations in Elementor?

While the Creative Image widget itself focuses on masking images, you can add image reveal animations using other features in Elementor. For instance, check out the tutorial on how to add image reveal animation on scroll in Elementor for more dynamic effects that can complement your masked images.

What happens if I forget to enable the Mask Image Shape toggle?

If you forget to enable the Mask Image Shape toggle in the Style tab, your mask image will not be applied to the main image. This means you won't see the desired masked effect, which can lead to a flat design. Always ensure this toggle is activated to achieve the intended visual impact.

Last reviewed: April 9, 2026