--- title: "How to Add Mask on Images in Elementor Image Cascading Widget?" url: https://theplusaddons.com/docs/add-mask-on-images-in-elementor-image-cascading-widget/ date: 2024-05-14 modified: 2026-09-18 lang: en author: "Aditya Sharma" description: "Masking takes a rectangular photo and shows it through a shape — a circle, a star, a brush stroke, a logo outline. In a cascade it is what stops the..." image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-Mask-on-Images-in-Elementor-Cascading-Image-Widget_-1024x536.jpg word_count: 680 --- # How to Add Mask on Images in Elementor Image Cascading Widget? ## - The Plus Addons for Elementor Image Cascading widget masks each layer separately with its own Mask Image Shape switch, so one layer can be masked while the others stay square. - Image Cascading ships only in the Pro version of The Plus Addons for Elementor, and it appears under The Plus Addons > Widgets after the toggle is turned on and the Elementor editor is reloaded. - Mask Image accepts a PNG with a transparent background or an SVG, and only the opaque part stays visible while transparent areas are cut away. - Image Shadow uses a plain text field with a CSS value such as 1px 1px 4px rgba(0,0,0,0.75), and the widget applies it as a CSS drop-shadow() that follows the masked outline. Masking takes a rectangular photo and shows it through a shape — a circle, a star, a brush stroke, a logo outline. In a cascade it is what stops the layers looking like a pile of boxes. Each layer of the **Image Cascading** widget from The Plus Addons for Elementor has its own **Mask Image Shape** switch, so you can mask one layer and leave the rest square. *To check the complete feature overview documentation of The Plus Addons for Elementor Image Cascading widget, [click here](https://theplusaddons.com/docs/cascading-image-widget-settings-overview/).* ***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/image-cascading/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Before You Start - **Edition:** **Pro** — Image Cascading ships only in the Pro version of The Plus Addons for Elementor. The widget file is not in the free plugin at all, so it does not appear in the widget list without Pro.- **Widget to enable:** **Image Cascading**, under **The Plus Addons > Widgets**. Search for it and turn the toggle on, then reload the Elementor editor.- **Where the settings are:** drop the **Image Cascading** widget on the page. The **Content** tab holds three sections — **Image Cascading** (the layers), **Image Animation** and **Styling**.- **How it is built:** each item in the **Add Multiple Cascading Sections** repeater is one layer. Layers are absolutely positioned inside the widget, so they can overlap.- **You need the mask shape as a file:** a PNG with a transparent background or an SVG. The opaque part of the file is what stays visible; everything transparent is cut away. ## Mask a Layer - In the **Image Cascading** section, open the item you want to mask.- Set **Layer Type** and add the content. The switch is offered on **Image** and **Text Content** layers; we tested it on an image.- Scroll to **Extra Options** and switch on **Mask Image Shape**.- Upload or pick your shape in the **Mask Image** field that appears.- Update the page and look at the front end. ## The Result The same photo twice: plain on the left, and on the right with a transparent star PNG in **Mask Image** and a shadow typed into **Image Shadow**. ![The same photo shown twice in a cascade, square on the left and clipped to a star shape with a soft shadow on the right](https://theplusaddons.com/wp-content/uploads/2026/09/imgcascading-result-mask.webp) ![An image cascade whose layers are clipped to custom mask shapes](https://theplusaddons.com/wp-content/uploads/2024/05/cascading-image-mask-image-shape-demo.png) ## Image Shadow **Image Shadow**, just below **Mask Image**, is a plain text field, not a colour picker. Type a CSS shadow value into it — the placeholder shows the format, `1px 1px 4px rgba(0,0,0,0.75)` — and the widget applies it as a CSS `drop-shadow()`. > *A drop-shadow() follows the masked outline, so the shadow traces the star or the brush stroke instead of drawing a rectangle around it. That is the whole reason it is here and not a normal box shadow.* ## How It Behaves - The mask is stretched to fill the layer, so a shape whose proportions differ from the photo's will distort. Crop the mask file to roughly the same aspect ratio as the image.- Masking is per layer. Switch it on for one item and the others are untouched.- The mask file is used for its shape only. Its colours are ignored; only opaque against transparent matters. ## Limitations - There is no size, position or repeat control for the mask, and no built-in shape library — you supply the file.- **Image Shadow** is unvalidated text. A typo produces no shadow and no warning.- A mask with soft, semi-transparent edges gives a soft edge on the layer, which can look blurry at large sizes. Use a hard-edged file for crisp shapes. ## Troubleshooting ### The layer disappeared completely The mask file has no opaque area — usually a JPG, which has no transparency at all, or an SVG without a filled path. Use a PNG with a transparent background. ### The shape is squashed The mask is stretched to the layer's box. Make the mask file the same shape as the image, or adjust the layer's **Width**. ### Nothing happened Check that **Mask Image Shape** is on *and* that **Mask Image** holds a file. With the switch on and the field empty the layer is left as it was. ## Related Docs - [Cascading Image Widget: Settings Overview](https://theplusaddons.com/docs/cascading-image-widget-settings-overview/)- [How to Create Image Cascading Effect in Elementor?](https://theplusaddons.com/docs/create-image-cascading-effect-in-elementor/)- [How to Add LottieFiles in the Elementor Image Cascading Widget?](https://theplusaddons.com/docs/add-lottiefiles-in-the-elementor-image-cascading-widget/)