---
title: "How to Mask an Image in WordPress? (Custom Image Mask)"
url: https://nexterwp.com/docs/mask-an-image-in-wordpress-custom-image-mask/
date: 2024-12-09
modified: 2026-06-10
author: "Aditya Sharma"
description: "Do you want to add a mask to images in WordPress? Masking crops your image into a custom shape, such as a circle, hexagon, or any SVG outline, making your..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Mask-an-Image-in-WordPress_-Custom-Image-Mask-1024x519.jpg
word_count: 314
---

# How to Mask an Image in WordPress? (Custom Image Mask)

## Key Takeaways

- Nexter Blocks Advanced Image block applies a custom image mask in the WordPress Block editor (Gutenberg) without writing any code.
- Mask Image Shape toggle sits in the Special Options tab, and any PNG or SVG file with a transparent background works as the mask shape.
- Box Shadow section adds a custom drop shadow to masked images, which helps separate them from a light-colored background.

Do you want to add a mask to images in WordPress? Masking crops your image into a custom shape, such as a circle, hexagon, or any SVG outline, making your visuals stand out compared to standard rectangular images.

The Advanced Image block in Nexter Blocks lets you apply a custom image mask in the WordPress Block editor (Gutenberg) without writing any code.

*To check the complete feature overview documentation of the Nexter Blocks Advanced Image block, [click here](https://nexterwp.com/docs/add-advanced-effects-to-an-image-in-wordpress/).*

**Best Used For:**

- Portfolio sites where project thumbnails need a shaped, on-brand frame instead of a rectangular crop

- Agency and design websites showcasing work in custom shaped image frames

- Product landing pages where images need a polished visual treatment that matches your brand identity

**Requirement — This block is a part of Nexter Blocks. Make sure it is installed and activated.**

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-advanced-image/)

To add an image mask, add the Advanced Image block to the page and follow the steps:

1. Add your image in the **Upload Image** section.

2. Enable the **Mask Image Shape** toggle from the **Special Options** tab. The masking option is in the **Special Options** tab, not the main Content tab.

3. Add your mask shape file in the **Mask Image** section. Any PNG or SVG file with a transparent background works as the mask shape. The visible part of your image fills the non-transparent area of the mask file.

You can also add a custom [drop shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow) to the masked image from the **Box Shadow** section. Use this when the masked image sits on a light-colored background and you need depth to visually separate it from the page.

Your image now shows in the masked shape.

For more image effects with Nexter Blocks, see [how to add a parallax image in WordPress](https://nexterwp.com/docs/add-a-parallax-image-in-wordpress/). For a text version of the masking technique, see [how to create a text mask effect in WordPress](https://nexterwp.com/docs/create-a-text-mask-effect-in-wordpress/).

![](https://nexterwp.com/wp-content/uploads/2024/12/advanced-image-mask-image-demo.png)