--- 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-09-15 lang: en author: "Aditya Sharma" description: "Masking cuts an image to a shape instead of leaving it a rectangle, so a square photograph becomes a circle, a hexagon, or whatever silhouette your design calls for. The..." image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Mask-an-Image-in-Elementor_-2-1024x536.jpg word_count: 823 --- # How to Mask an Image in Elementor? (Custom Image Mask) ## - Creative Image only applies Mask Image Shape in The Plus Addons for Elementor Pro, and the widget disappears from the editor when the Pro plugin is switched off. - Masking uses a PNG shape file with a fully transparent background, and the widget cuts the picture to that silhouette instead of leaving it rectangular. - Mask Position, Mask Repeat, and Mask Size control how the shape sits over the image, with Center Center and No-Repeat as defaults and Cover or Contain changing the fit. - Image Shadow accepts raw CSS shadow values such as 6px 8px 12px rgba(0,0,0,0.55), and it follows the outline of the mask instead of drawing a rectangle. Masking cuts an image to a shape instead of leaving it a rectangle, so a square photograph becomes a circle, a hexagon, or whatever silhouette your design calls for. The **Creative Image** widget does it with **Mask Image Shape**: you supply a PNG of the shape you want, and the widget uses it to cut the picture. *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/).* ***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/creative-images-for-elementor/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Before You Start - **Edition:** **Pro** — Creative Image is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor at all, and a page that already uses it shows nothing where the widget was.- **Widget to enable:** Creative Image, switched on under **The Plus Addons > Widgets** (in the **Advanced** group there). In the Elementor panel it appears under **Plus Advanced**.- **You need an image:** pick one in **Choose Image** first. With nothing chosen the widget renders the plugin's own grey placeholder, so none of the effects below will look like anything.- **You need a mask file:** a PNG whose shape is solid and whose background is fully transparent. The transparent parts are what gets cut away from your picture.- **Make the mask roughly the same proportions as the image**, or the shape will be stretched or float off-centre. ## Apply the Mask - Add the **Creative Image** widget and choose your picture in **Choose Image**.- Leave **Image Style** on **Creative Image**. Masking is not available in the **Scroll Reveal Image** style.- Open the **Style** tab and switch **Mask Image Shape** on in the **Style Image** section.- Upload or pick your shape file in **Mask Image**. ![Mask Image with the Mask Position, Mask Repeat and Mask Size dropdowns](https://theplusaddons.com/wp-content/uploads/2026/09/creativeimage-mask.webp) ## Fit the Shape to the Image Three responsive dropdowns control how the shape sits over the picture. Set them per device if the container changes proportion on mobile. | Setting | What it does | Default | | ------- | ------------ | ------- | | **Mask Position** | Where the shape sits over the image — the usual nine anchor points. | Center Center | | **Mask Repeat** | Whether the shape tiles. Leave it alone for a single shape; switch to a repeat value only if you are masking with a pattern. | No-Repeat | | **Mask Size** | **Contain** fits the whole shape inside the image; **Cover** scales the shape until it fills the image, cropping the shape itself. | Contain | > *If the mask looks too small or lands off to one side, it is almost always **Mask Size** and **Mask Position** rather than the file. Try **Cover** first, then nudge the position.* ## Add a Shadow Behind the Shape **Image Shadow** sits just below the mask controls. It is a plain text field that takes a raw CSS shadow value — the panel shows `Ex. 1px 1px 4px rgba(0,0,0,0.75)` as a hint. Type something like `6px 8px 12px rgba(0,0,0,0.55)` and the shadow follows the outline of the shape rather than a rectangle around it. ![The Image Shadow field holding a CSS shadow value](https://theplusaddons.com/wp-content/uploads/2026/09/creativeimage-mask-shadow.webp) That outline-hugging shadow is the reason to use this field instead of **Box Shadow** further down, which would draw a rectangle. ![A landscape photo cut to a hexagon with a soft drop shadow behind it](https://theplusaddons.com/wp-content/uploads/2026/09/creativeimage-result-mask.webp) ## How It Behaves - The mask is applied with CSS, so the **original image file is untouched** — change or remove the mask at any time and the full picture comes back.- The shape applies in the editor as well as on the published page, so you can judge the fit as you work.- The masked image is still a real `` tag, so its alt text is carried on to the page. ## Limitations - **Creative Image style only.** Switch **Image Style** to **Scroll Reveal Image** and the mask is not applied, even though the setting stays stored — switching back restores it.- **A mask file with no transparency does nothing visible.** A solid rectangle masks a rectangle. Export the PNG with a transparent background.- **Image Shadow is not validated.** It is passed straight through to CSS, so a typo produces no shadow and no error message.- **Don't combine masking with Scroll Image**, which swaps the picture for a background element and takes the mask target away with it. ## Troubleshooting ### My image still looks rectangular The mask file probably has no transparent area, or it is a JPG. Use a PNG whose background is transparent, not white. ### The shape is cut off at the edges **Mask Size** is on **Cover** and the shape is being scaled past the image. Switch it to **Contain**. ### The shape is not centred Set **Mask Position** to **Center Center**, and check the mask file's own proportions match the image reasonably closely. ### Image Shadow does nothing The value must be valid CSS shadow syntax, for example `6px 8px 12px rgba(0,0,0,0.55)`. Anything the browser cannot parse is dropped silently. ### The Mask Image Shape switch is missing Check **Image Style** in the **Content** section. The switch only appears for **Creative Image**. ## Related Docs - [Creative Image Widget: Settings Overview](https://theplusaddons.com/docs/creative-image-widget/)- [How to Add Image Reveal Animation on Scroll in Elementor?](https://theplusaddons.com/docs/add-image-reveal-animation-on-scroll-in-elementor/)- [How to Add Image Animation in the Creative Image Widget?](https://theplusaddons.com/docs/add-image-animation-in-the-creative-image-widget/)- [How to Add a Parallax Image in Elementor?](https://theplusaddons.com/docs/add-a-parallax-image-in-elementor/) ## Frequently Asked Questions **Q: What do I need before I can mask an image in Elementor?** A: The key requirement is the Creative Image widget from The Plus Addons for Elementor Pro, because the mask feature only exists there. You also need a chosen image and a PNG mask file with a solid shape and a fully transparent background. That transparency is what lets the widget cut away parts of the picture. If the mask and image proportions are close, the result is much easier to center and less likely to look stretched. **Q: Why does my image still look rectangular after applying a mask?** A: A rectangular result usually means the mask file has no transparent area or it is a JPG instead of a transparent PNG. The masking system cuts only through transparent parts, so a solid rectangle behaves like a rectangle. A quick fix is to export the mask as a PNG with transparency, because white backgrounds do not create cutouts. **Q: What is the best way to keep the masked shape centered and sized correctly?** A: Mask Position and Mask Size do most of the work here. Center Center is the default anchor point, while Contain keeps the whole shape inside the image and Cover scales it until it fills the image. If the shape feels off-center or too small, try Cover first, then adjust position. Matching the mask file proportions to the image also helps prevent drifting. **Q: Should I use Image Shadow or Box Shadow for a masked image?** A: Image Shadow is the better choice when you want the shadow to follow the silhouette instead of drawing a rectangle. It accepts raw CSS shadow syntax such as 6px 8px 12px rgba(0,0,0,0.55), and The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH passes that straight through to CSS. Box Shadow would create a rectangular shadow around the element instead. **Q: Does image masking work with Scroll Reveal Image or Scroll Image?** A: Masking only works with Creative Image style. If Image Style is switched to Scroll Reveal Image, the mask setting stays stored but it is not applied until you switch back. The page also warns not to combine masking with Scroll Image, because that swaps the picture for a background element and removes the mask target. **Q: Why is the Mask Image Shape switch missing in Elementor?** A: That switch appears only when Image Style in the Content section is set to Creative Image. If you are looking at Scroll Reveal Image or another style, the control will not show up. The widget itself also has to be available in The Plus Addons for Elementor Pro and switched on under The Plus Addons > Widgets in Elementor.