--- 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-09-15 lang: en author: "Aditya Sharma" description: "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..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Mask-an-Image-in-WordPress_-Custom-Image-Mask-1024x519.jpg word_count: 474 --- # How to Mask an Image in WordPress? (Custom Image Mask) ## Key Takeaways - Advanced Image bloquea la máscara de imagen en la edición gratuita, y algunas de sus efectos necesitan Nexter Blocks Pro; la opción se activa en Nexter > Blocks dentro del panel de WordPress. - 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. - PNG o SVG con transparencia funcionan como forma de máscara, mientras que una foto normal o un JPEG blanco sobre blanco no recorta nada; la imagen enmascarada sigue ocupando su rectángulo completo para el diseño y los clics. 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](https://nexterwp.com/docs/add-advanced-effects-to-an-image-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-advanced-image/) ## 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 - Add the **Advanced Image** block to your page and click **Design from Scratch**. - In the **Content** panel, upload or choose your image, then set **Image Size** and **Alignment**. ![The Content panel with Image Size and Alignment](https://nexterwp.com/wp-content/uploads/2026/09/advimg-image.webp) - Open **Special Options** and switch on **Mask Image Shape**. ![Mask Image Shape on, with the Mask Image chooser](https://nexterwp.com/wp-content/uploads/2026/09/advimg-mask.webp) - Choose your shape in **Mask Image**. - 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 - [Advanced Image block: all settings](https://nexterwp.com/docs/add-advanced-effects-to-an-image-in-wordpress/)- [Image reveal animation on scroll](https://nexterwp.com/docs/add-image-reveal-animation-on-scroll-in-wordpress/)- [Parallax image](https://nexterwp.com/docs/add-a-parallax-image-in-wordpress/) ## Frequently Asked Questions **Q: What do I need before masking an image in WordPress?** A: 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. **Q: Why does my masked image look exactly the same after I turn on the mask?** A: 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. **Q: What kind of image file should I use for a custom mask shape?** A: 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](https://nexterwp.com/docs/add-advanced-effects-to-an-image-in-wordpress/) covers the block’s full image options. **Q: Does masking an image change the original file in WordPress?** A: 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. **Q: Why does my masked shape look squashed?** A: 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](https://nexterwp.com/docs/add-image-reveal-animation-on-scroll-in-wordpress/) and [Parallax image](https://nexterwp.com/docs/add-a-parallax-image-in-wordpress/). **Q: Can I use a masked image as a normal clickable block?** A: 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.