Skip to content

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

Updated On : September 27, 2026By : Reading Time : 3 minutes

Key Takeaways

  • Advanced Image bloquea la máscara de imagen en la edición Freemium, y algunas de sus opciones requieren Nexter Blocks Pro; la opción Mask Image Shape funciona en el plugin gratuito.
  • Máscara de imagen usa una máscara CSS real: el bloque calcula mask-image hacia la forma elegida, conserva las partes sólidas y recorta las áreas transparentes sin tocar el archivo original.
  • Limitaciones de máscara: la forma se estira al cuadro de la imagen, los bordes se cortan sin difuminarse y la imagen enmascarada sigue ocupando su rectángulo completo para el diseño y los clics.
Table of Contents

Rectangles are the default shape of the web, and a page of them looks like a spreadsheet.

A mask cuts your image to the shape of another image — a blob, a brush stroke, a logo — without touching the original file.

For every Advanced Image setting in one place, see the Advanced Image block guide.

LIVE BLOCK LINK

Before You Start

  • Edition: Freemium — the Advanced Image block is in the free plugin, and some of its effects need Nexter Blocks Pro.
  • Block to enable: Advanced Image, switched on under Nexter > Blocks in your WordPress dashboard.
  • Your image in the Media Library, at a size large enough for where it will sit.
  • A shape to cut with: a PNG or SVG where the solid areas are what you keep.

Steps

  1. Add the Advanced Image block to your page and click Design from Scratch.
  1. In the Content panel, upload or choose your image, then set Image Size and Alignment.
The Content panel with Image Size and Alignment
  1. Open Special Options and switch on Mask Image Shape.
Mask Image Shape on, with the Mask Image chooser
  1. Choose your shape in Mask Image.
  1. Publish and check the edges of the cut.

This one works on the free plugin. Masking and the FancyBox lightbox are the two Special Options that do not need Pro — confirmed by rendering the same block with Pro deactivated.

How It Behaves

  • The shape is applied as a real CSS mask — the rendered block computes mask-image pointing at the shape you chose.
  • The solid parts of the shape are what you see. Transparent areas cut the picture away, which is why a PNG with real transparency works and a white-on-white JPEG does not.
  • Your original image is untouched. The cut is done by the browser, so you can change or remove the shape at any time.
  • The mask sits on the image wrapper, so the block keeps its normal size in the layout.

Limitations

  • A shape without transparency masks nothing — a plain photo used as a mask leaves the image as it was.
  • The shape is stretched to the image’s box, so a shape with very different proportions will distort.
  • Masked edges are cut, not feathered. Soft edges have to come from the shape file itself.
  • A masked image still occupies its full rectangle for layout and for clicks, including the cut-away parts.

Troubleshooting

The image looks exactly the same

The shape has no transparent areas. Use a PNG or SVG where the background is genuinely transparent rather than white.

The shape is squashed

The shape is being stretched to fit the image box. Either crop the image closer to the shape’s proportions or set Max Width so the box matches.

Almost all of my image disappeared

The shape is mostly transparent, so almost everything is being cut away. You may have the shape inverted — the solid parts are what is kept.

Related Docs

Share your Thoughts

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

What do I need before masking an image in WordPress?

Masking works best when the source image is already large enough for the space it will occupy, because the browser keeps the block’s normal layout size. The shape file matters just as much: use a PNG or SVG with real transparency, since the solid parts are what stay visible. In Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter, the Advanced Image block is in the free plugin, and some effects need Nexter Blocks Pro.

Why does my masked image look exactly the same after I turn on the mask?

That usually means the mask file has no transparent areas. A plain photo or a white-on-white JPEG will not cut anything away because CSS masking depends on transparency to define what stays visible. The page’s rule is simple: use a PNG or SVG where the background is genuinely transparent. In practice, that is the difference between a real cutout and an image that just sits there unchanged.

What kind of image file should I use for a custom mask shape?

A PNG or SVG is the right choice because the solid parts are what you keep and the transparent parts are what get cut away. That matters for logos, blobs, and brush-stroke shapes where you want clean edges and predictable cutouts. A white shape on an opaque background will not behave like a mask. For settings context, the Advanced Image block guide covers the block’s full image options.

Does masking an image change the original file in WordPress?

No. The original image stays untouched in the Media Library because the cut happens in the browser as a CSS mask. That means you can change or remove the shape later without re-uploading anything. It also explains why this is safer than editing files directly: only the rendered block changes, not your source asset.

Why does my masked shape look squashed?

The shape is being stretched to fit the image box, so mismatched proportions will distort it. The clean fix is to crop the image closer to the shape’s proportions or set Max Width so the box matches better. This is a layout issue, not a file corruption issue. If you want to compare behavior with other Advanced Image effects, see Image reveal animation on scroll and Parallax image.

Can I use a masked image as a normal clickable block?

A masked image still occupies its full rectangle for layout and clicks, including the cut-away parts. That means the browser treats it like a normal box even though part of it is visually hidden. This matters when placing masked images near other content because spacing and click areas follow the rectangle, not just the visible shape. The page also notes that masked edges are cut sharply rather than feathered.

Last reviewed: September 27, 2026

Related Docs

How to Add a Before and After Opacity Slider in WordPress?
icon
How to Add a Blend Cursor in WordPress?
icon
How to Add a Blockquote in WordPress?
icon
How to Add a Button in a WordPress Message Box?
icon
How to Add a Button in WordPress Timeline?
icon
How to Add a Call to Action Banner in WordPress?
icon
123………………………………………………………………53