How to use mask option in elementor


The Elementor Mask Option allows you to add a mask to any element. To Create stylish designs for any element you want like an image, video, Google Maps, and more using the preset shapes. Create your own masks in SVG or PNG formats and upload them for even more possibilities.

How it works:

The feature to apply image masking works on Elementor widgets that involve an image such as the Image widget and the Image Box widget. You will see a new option called Image Masking right beneath the image selector. There are thirty-nine different masking shapes you can choose from. You can also use a custom masking shape by uploading your own SVG file.


Mask option found in advance tab of widget

Click on mask to enable the its features

Shape – Choose one of the preset shapes

  • Circle
  • Flower
  • Sketch
  • Triangle
  • Blob
  • Hexagon
  • Custom (Upload your own custom SVG path file)

When custom image selected,  You may upload a custom mask to the media library using PNG or SVG format and then apply the custom shape preset

Fit – From the dropdown menu select following options:

  • Fit
  • Fill
  • Custom

Position – Select the mask position from the following options in dropdown menu:

  • Center Center
  • Center Left
  • Center Right
  • Top Center
  • Top Left
  • Top Right
  • Bottom Center
  • Bottom Left
  • Bottom Right

Repeat – Choose from the following repeat options:

  • No Repeat
  • Repeat
  • Repeat-X
  • Repeat-Y
  • Round
  • Space
Share on facebook
Share on twitter
Share on linkedin
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x