July 25, 2023

Creative Image Effects with Bricks Builder Image Mask and CSS

Play Video

With a Bricks Builder Image Mask, you can craft unique website effects. A touch of CSS can aid in generating captivating visuals that will engage your site visitors. Web Squadron will show you how in this quick tutorial. So, grab your favorite beverage, and let’s get started!

Understanding WordPress Image Masks

First things first, let’s talk about image masks. Imagine you have a photo, and you want to change its shape or even blend it into the background. That’s where image masks come in. They’re like digital stencils, allowing you to control the visibility of an image. Pretty neat, right?

Bricks Builder and Image Masks

Now, let’s talk about Bricks Builder. It’s a fantastic tool for building websites, but it doesn’t have a built-in feature for image masks. But don’t worry! With a little bit of CSS magic, we can easily add this feature.

Creating a Bricks Builder Image Mask with CSS

Alright, let’s roll up our sleeves and get to work. Here’s how you can create an image mask in Bricks Builder using CSS:

  1. Start by adding an image to your Bricks Builder layout. You can do this by dragging and dropping the image element into your layout.
  2. Once you’ve added the image, you might want to adjust its size and position. To do this, navigate to the ‘Style’ tab and adjust the height and width to your liking.
  3. Now, it’s time to apply the image mask. To do this, we’ll need to add a CSS class. Scroll down to the ‘CSS’ tab and give your image a class name. For our example, we’ll use the class name ‘doom’.
  4. Next, we’ll need to insert the URL of the SVG image we want to use as the mask. In the ‘CSS’ tab, type the following code Image Mask CSS:
    .doom {
      -webkit-mask-image: url("https://your-image-url.svg");
      -webkit-mask-position: left;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 500px;

    Remember to replace "https://your-image-url.svg" with the actual URL of your SVG image.

Customize WordPress Image Mask

Now that you’ve got the basics down, you can start playing around with your image mask. Try adjusting the mask’s position and size to see how it changes the final image. Remember, there’s no right or wrong here. It’s all about experimenting and having fun!
We highly recommend that you check out Bennett Feely’s Clippy to play around with different shapes.


That’s how you create and customize a Bricks Builder Image Mask using CSS. It’s a fun and creative way to add a little extra flair to your website images. So, why not give it a try? You might be surprised by what you can create!

Required Resources

Bricks Builder Logo
Payment required
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Creative Image Effects with Bricks Builder Image Mask and CSS
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.