How to Add Image Masking in Divi

Updated: September 12, 2022

This may sound cliché, that an image is worth a thousand words. Nevertheless, we have admitted that image has that much power. There are so many ways to create an image more interesting. Masking is one of the methods that we can use to make the image stand out.

In short, image masking uses a shape or object to cut off or hide portions of the image. You can adjust a specific part of your image while leaving the rest untouched. This article will show you how to add an image mask in Divi.

Steps to Add Image Mask in Divi

Step 1: Add New Section

Go to the Divi Builder editor and then create a row with three columns. We want to add the Code module for each column in this example. We prepare the first column for the main image, and for two other columns, we will use them for shapes.

Step 2: Edit and Style up the First Column

Alright, we start with the first column. Add a Code module. On the settings panel, go to the Background block and then add a background image as your preference.

Once you add a background image, go to the Admin Label block, then give it a name for this module. We named it "1st" for this module. Applying the admin label will make it easier when you want to access it on the Layers menu.

Still on the Code module settings panel, go to the Design tab -> Sizing options. Set the Width and Height to 450px.

Now, it’s time to mask the image. Go to the Advanced tab -> Custom CSS. Next, paste the CSS snippet below to the Main Element field.

-webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1MDAgNTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48cGF0aCBkPSJNMjY0LjM1MywzMy42ODFjMTAzLjEwMiwyOC42NDcgMjM0LjQ1NSw4MC42NzEgMjM0LjQ1NSwyMjMuOTYzYzAsMTMzLjk0NSAtMTU3LjA4OSwyMzYuODY3IC0yNTcuMDIyLDIyNS42NjFjLTg3LjU5MywtOS44MjEgLTE0Ny43MzIsLTQ5LjI0NSAtMTgzLjUxNiwtMTE0LjE5Yy0zNy45MzcsLTY4Ljg1NiAtNjcuNjg4LC0xOTYuOTkxIC01My40NTUsLTI1OC44OTFjNy40NTMsLTMyLjQxNSAyMi44NzgsLTU1LjcwMiA0NS42NTYsLTcwLjQ3YzU0LjM2NSwtMzUuMjQ3IDE0MC42NywtMjYuNDE0IDIxMy44ODIsLTYuMDczWiIvPjwvc3ZnPg==");
-webkit-mask-repeat: no-repeat;

Step 3: Edit and Style up the Second Column

Next, we move to the second column. Add the Code module, then go to the settings panel. Afterward, go to the Background block and add a background color of your preference.

Once you add a background color, go to the Admin Label, then give a name for this module. We named it "2nd" for this module.

Next, we want to edit the size of this module. Go to the Design tab -> Sizing options. Set the Width and Height to 145px.

If you want to rotate the shape, you can go to Transform and choose Transform Rotate. In this example, we set 15deg to the first field only.

Now, it’s time to mask the shape. Go to the Advanced tab -> Custom CSS. Next, paste the CSS snippet below to the Main Element field.

-webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAzIDMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+PHBhdGggZD0iTTIuMDY4LDEuMjk3YzAsMC4yMDQgLTAuMDg0LDAuNDA1IC0wLjIyNiwwLjU0OWMtMC4xNDQsMC4xNDIgLTAuMzQ0LDAuMjI4IC0wLjU0NiwwLjIyOGMtMC4yMDUsLTAgLTAuNDA3LC0wLjA4NiAtMC41NDksLTAuMjI4Yy0wLjI4NywtMC4yOTEgLTAuMjg3LC0wLjgwNSAtMCwtMS4wOTVjMC4xNDIsLTAuMTQyIDAuMzQ0LC0wLjIyNSAwLjU0OSwtMC4yMjVjMC4yMDIsMCAwLjQwMiwwLjA4MyAwLjU0NiwwLjIyNWMwLjE0MiwwLjE0NyAwLjIyNiwwLjM0NCAwLjIyNiwwLjU0NiIgc3R5bGU9ImZpbGwtcnVsZTpub256ZXJvOyIvPjwvc3ZnPg==");
-webkit-mask-repeat: repeat;
-webkit-mask-size: 5px;

You can adjust the shape’s position to the main image per your preference. Go to Position. Set to Absolute, edit the Vertical Offset, Horizontal Offset, and Z-Index.

Step 4: Edit and Style up the Third Column

Alright, now we will edit and style up the third column. Add the Code module, then go to the settings panel. Afterward, go to the Background block and add a background color of your preference.

Once you add a background color, go to the Admin Label, then give a name for this module. We named it "3rd" for this module.

Next, we want to edit the size of this module. Go to the Design tab -> Sizing options. Set the Width and Height to 45px.

If you want to rotate the shape, you can go to Transform and choose Transform Rotate. In this example, we set 315deg to the first field only.

Now, it’s time to mask the shape. Go to the Advanced tab -> Custom CSS. Next, paste the CSS snippet below to the Main Element field.

CLIP-PATH: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);

You can adjust the shape’s position to the main image per your preference. Go to Position. Set to Absolute, edit the Vertical Offset, Horizontal Offset, and Z-Index.

If you want to set the position of your image masking to the center of the page, go to the Row Settings -> Design tab -> Spacing. Set 400px of left margin.

That’s it. Don’t forget to click the Save Draft button or Publish button if you want to save or publish your project.

The Bottom Line

This article shows you how to add image masking in Divi without the help of any add-ons. Image masking is impressive; it will make your image look stunning. But keep in mind that not every image is suitable for masking. In some cases, the basic image is much better.

There is actually a simpler solution to add image masking in Divi: using the Divi Pixel plugin. The plugin offers several masking shapes. You can apply a certain masking shape with a single click. No need to deal with CSS code. Here are some masking shapes offered by Divi Pixel.

Where to get Divi Pixel?

You can get it on Divi Marketplace.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating on WordPress with Divi.

Hello.

How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.