BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Download free
Guide

Image Mask Free

How to set up and style the Image Mask widget in Elementor.

Image Mask places an image inside a shape such as a circle, blob, hexagon, heart, arch or brush stroke, or inside your own SVG or PNG. A colored shape can sit behind it, and gentle motion and hover effects add life to hero and about sections.

Part of: Bright Addons (free).

See the widget page and live demo

Set it up

  1. Drag the Image Mask widget onto the page.

  2. In Image, choose the Image and a Shape.

  3. For your own shape, choose My own shape (SVG or PNG) and pick the Shape File.

  4. Set Box Shape, Image Focus, Width and Alignment.

  5. In Shape Behind and Motion, set the Color, position, Motion and Hover Effect.

  6. Add a shadow or opacity in the Style tab.

Content options

Image

Option What it does
Image The picture to mask.
Image Size Image size used.
Shape Circle, rounded square, three blobs, morphing blob, hexagon, diamond, triangle, star, heart, arch, leaf, brush stroke or your own shape.
Shape File An SVG or a PNG with a transparent background.
Shape Fit Stretch to the box, fit inside, or fill and crop.
Box Shape Square, portrait or landscape ratios.
Image Focus Which part of the photo stays in view.
Width Width of the widget.
Alignment Left, center or right.
Link Optional link on the image.

Shape Behind and Motion

Option What it does
Shape Behind the Image Shows a colored copy of the shape behind the image.
Color Color of the shape behind.
Move Sideways Moves the back shape left or right.
Move Up or Down Moves the back shape up or down.
Rotate Turns the back shape.
Motion None, float up and down, sway, breathe, or the back shape circling around.
Motion Speed (seconds) How long one motion cycle takes.
Hover Effect None, zoom image, zoom out image, gray to color, or tilt shape.
Bright Addons Pro

Like this free widget? Get 70+ more with Pro

Pro adds 77 widgets, 10 extensions, a Theme Builder and 32 dynamic tags, and keeps every free widget. From $16 a year, with a 14-day money-back guarantee.

See plans and pricing Compare Free and Pro

Style options

These sections are in the Style tab.

  • Image

    shadow color, shadow size and opacity.

Tips

  • Pick an image where the subject sits near the middle, then fine tune with Image Focus.

  • Your site must allow SVG uploads to use an SVG shape file; a PNG works everywhere.

  • Motion stops for visitors who ask their device for less motion.

Questions and answers

Can I use my own shape?

Yes. Choose My own shape (SVG or PNG) and upload a file with a transparent background.

Does the shape behind the image move?

It can. Choose Shape behind circles around under Motion, or move it by hand with Move Sideways and Move Up or Down.

Will it work on phones?

Yes. The mask is plain CSS and scales with the widget width.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides