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.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
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.
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.
That outline-hugging shadow is the reason to use this field instead of Box Shadow further down, which would draw a rectangle.
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
<img>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.
