How to Add Image Masking in Elementor (Without Add-on)

Image is an essential element of a design. In Elementor, you can easily add an image to your design — be it page or theme builder template — using the Image widget. The customization options offered by Elementor are also plenty enough. You can apply a hover effect, CSS filters, and so on. Starting version 3.2, you can now also add a mask layer to your image, allowing you to transform your image into a wide range of shapes. Previously, you could only accomplish it using an add-on.

The image masking feature is available on both versions of Elementor so that you don’t need to upgrade to the pro version if you don’t need the pro features. There are six default mask shapes offered by Elementor:

  • Circle
  • Flower
  • Sketch
  • Triangle
  • Blob
  • Hexagon

You can also use your own shape thanks to the SVG support.

How to Add Image Masking in Elementor

First, add an Image widget to the canvas area and upload the image you want to use. New to Elementor? You can read our previous article to learn how to work with the Image widget in Elementor.

You can go to the Style tab to set the size of the image. Once done setting the size, you can go to the Advanced tab and open the Mask block. Enable the Mask option. Select the mask shape on the Shape option. You can set the shape size on the Size option and the shape position on the Position option.

That’s it. You can publish your page/template once you are done editing it.

The Bottom Line

Image masking is a new feature offered by Elementor version 3.2. The feature offers more styling options you can add to an image on your Elementor design. Previously, you could only add an image masking using an add-on (Happy Addons is one of the Elementor add-ons that offer image masking feature). Compared to Happy Addons, the mask shapes offered by Elementor are likely to limited, but since it supports SVG, you can create a custom shape so technically you can add any shape.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to save yearly expense up to $219? why not?

1 thought on “How to Add Image Masking in Elementor (Without Add-on)”

  1. Hi,

    Why is the hexagon mask in Elementor not filled? There is a hexagon shaped blank area in the center. How do I fill the shape?


Leave a Comment

Haven’t used Elementor Pro yet?