Utility extension · Free
Pick one of 20 shapes or upload your own SVG and the whole container, with its background, image, video and text, is clipped to it. Set it per device or change it on hover from the Style tab. Free.
The short answer
Mask is an Animation Addons for Elementor extension that adds an Elementor shape mask to Flexbox, Div Block and Grid containers in Elementor 4. Choose one of 20 built-in shapes or your own SVG, then set size, position and repeat. Everything inside the container is clipped, and the mask works per device, on hover and in Classes.
| Plan | Free |
|---|---|
| Type | Utility (Style tab section) |
| Works on | Elementor's Flexbox, Div Block and Grid |
| Main controls | Shape grid, Custom Mask, Clear, Size (Fit, Fill, Auto), Position (9 positions), Repeat (No-repeat, Repeat, Repeat-x, Repeat-y, Round, Space) |
| Built-in shapes | Circle, Oval Vertical, Oval Horizontal, Pill Vertical, Pill Horizontal, Triangle, Diamond, Pentagon, Hexagon Vertical, Hexagon Horizontal, Heptagon, Octagon, Parallelogram Right, Parallelogram Left, Trapezoid Up, Trapezoid Down, Flower, Sketch, Hexagon, Blob |
| Engine | CSS mask-image (plus the -webkit- version for Safari), compiled into the element's stylesheet; no JavaScript |
| Editor preview | Shows on the canvas as soon as you pick a shape |
| Licence | None: part of the free plugin, works without Animation Addons Pro or Elementor Pro |
| Limits | Containers only (not on Headings, Images or Buttons); no custom scale or x/y offset; Repeat is hidden when Size is Fill; Custom Mask picks from the Media Library, and WordPress blocks SVG uploads unless your site allows them |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Ideas you can build today with Mask, free in Animation Addons, on Elementor 4's own elements. The settings on each card are a good place to start.
A hero with a portrait inside a soft blob on the right and the intro text on the left.
A Grid of six team cards, each photo-plus-name card clipped to a hexagon.
A product photo and price tag inside a hand-painted brush-stroke edge.
Project cards clipped to a pill; hovering a card switches it to a circle.
A large circle of looping crowd footage with the event date centred inside it.
A full-width gradient band broken into a repeating row of small diamonds, like a printed pattern, with the collection name below.
Features
Every point below is a real control in the Mask panel section or part of how it works. Nothing here needs custom code.
Because the mask sits on a Flexbox, Div Block or Grid, everything inside is clipped together: background image or gradient, a background video, child images, text and buttons.
Pick from the Shape grid, or click Custom Mask to choose an SVG from the Media Library. Switching back to a built-in shape keeps your upload, so you can compare without re-uploading.
Mask is a real Elementor 4 style property, so you set it per breakpoint, in the Hover state, or on a Class shared by many cards, the same way you set a border or radius.
The mask compiles into the element's stylesheet, so there is no flash of an unmasked box while the page loads.
Step by step
Six steps from switching it on to publishing. The bold names are the exact labels you will see on screen.
Download freeInstall and activate Animation Addons for Elementor and open a page in the Atomic Editor.
Select a Flexbox, Div Block or Grid and open its Style tab.
In the Mask section, pick a shape from the Shape grid, or click Custom Mask to choose your own SVG.
Set Size, Position and, if needed, Repeat.
Use the device switcher or the Hover state to change the shape per device or on hover.
Check the canvas and the front end, then publish.
Honest comparison
What each option has, side by side. Where the other choice is the better fit, we say so.
| Feature | Elementor 4.3.3 | Animation Addons Mask |
|---|---|---|
| Mask on Elementor 4 containers | No mask property in the atomic Style tab | Yes, Flexbox, Div Block and Grid |
| Built-in shapes | The classic mask's shape set | The same 20 shape files, plus any added through Elementor's shape filter |
| Custom SVG | Classic widgets only | Yes, via Custom Mask |
| Per device, Hover state, Classes | Not available on atomic containers | Yes, through Elementor's own style engine |
Compared with Elementor 4.3.3 (September 2026).
On classic widgets, Elementor's own mask does the job. On Elementor 4, where pages are built from Flexbox, Div Block and Grid, the Animation Addons Mask adds what the atomic Style tab is missing, on whole sections.
Who it's for
The people who get the most out of it, and what they use it for.
Moving organic shapes and blobs from Figma into Elementor 4 layouts.
Building portrait-led hero sections for coaches, clinics and creatives.
Framing products with hand-drawn edges.
FAQ
Install the free Animation Addons for Elementor plugin, select a Flexbox, Div Block or Grid and open the Style tab. In the Mask section, pick a shape such as Circle, Blob or Hexagon, or click Custom Mask for your own SVG. Animation Addons Mask clips the container and everything inside it to that shape.
Yes. In Animation Addons Mask, click Custom Mask and pick an SVG from the Media Library. WordPress blocks SVG uploads by default, so your site needs SVG uploads allowed first. The container shows through the filled parts of the SVG and is hidden where it is transparent. Choosing a built-in shape later keeps your custom file, so you can switch back.
No. Animation Addons Mask is offered on Elementor's Flexbox, Div Block and Grid only. To mask an image, put it in a Div Block, or set it as the Div Block's background, and mask the Div Block. For a video playing inside a shape with a click-to-expand button, use the Animation Addons Video Mask element.
Yes. Animation Addons Mask uses Elementor 4's own style system, so you can choose a different shape in the Hover state, set another shape at the Tablet or Mobile breakpoint, or save the mask on a Class that many cards share. Every card using that Class then changes shape the same way.
Animation Addons Mask fits the shape to the container's box. With Size set to Fit, the whole shape shows inside the box; with Fill, the shape covers the box and may be cropped. A circle in a wide box becomes an oval, so give the container a square aspect ratio, or choose Pill or Oval shapes for wide sections.
No script is loaded: Animation Addons Mask compiles the standard CSS mask and the Safari-prefixed version into the element's stylesheet, and the built-in shapes are small SVG files that ship with Elementor. It is part of the free plugin, so no Pro licence is needed, and the shape appears on the editor canvas as soon as you pick it.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
What works well with Mask on the same page or template.
Play a looping clip inside the masked container, free.
Tint the images inside your shapes with a colour or gradient.
Add custom mask scales or offsets the panel doesn't offer yet.
A clip in a shape that opens to full frame on click.
Another way to make cards feel less boxy.
Free on Elementor Free, on whole containers, with your own SVG and per-device shapes.
