---
title: "How to Mask an Image in WordPress? (Custom Image Mask)"
url: https://qa.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://qa.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

- Utilize the Advanced Image block from Nexter Blocks to apply custom masks to images in WordPress.
- Enable the Mask Image Shape toggle in the Special Options tab to activate image masking features.
- Add a custom drop shadow to the mask using the Box Shadow section for enhanced visual effects.

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://qa.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://qa.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://qa.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://qa.nexterwp.com/docs/create-a-text-mask-effect-in-wordpress/).

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