---
description: How to add and style mask parts.
---

# Mask

## What is a Mask?

A mask is a container that houses an image, and crops the image to various shapes.&#x20;

{% hint style="success" %}
**Location in the Parts Library:**   Base Parts > Layout > Mask
{% endhint %}

There are several different shapes to choose from:

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FOYTDxPP0UcgIRAaIGWaE%2FMaskExamples.gif?alt=media&#x26;token=fc60993e-8e12-4568-b66b-b3dd432e2fcf" alt=""><figcaption><p>Example Masks</p></figcaption></figure>

## Where Can I Use a Mask?

A mask can be used anywhere you would use an image. With that being said, don't overdo it with the shapes! They should be used where it makes sense in your overall page design and should be in keeping with your brand elements and/or product offering.

## Adding and Editing a Mask&#x20;

To add a mask, select the part where you’d like to add your mask go to Base Parts > Mask, select your preferred mask, and click ‘+’.

Once you've added your mask, select the mask to open the mask property editor on the right.&#x20;

Like many other parts, [borders](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/borders), [shadow](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/shadow), [opacity](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/opacity), [sizes](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/sizing-and-alignment), and [spacing](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/spacing) can be applied using the property editor on the right, once the mask has been selected.

### Changing the Image and the Shape

Click on Image > Value Set to select your image from the Media Gallery or upload an image from your device.

Click on Shape > Value Set to reveal the mask shapes available, and select your preferred shape.

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FU7YjkVnIsS8Td0HOOEul%2FMaskImageShape.gif?alt=media&#x26;token=319ab986-61cc-4efe-8f4c-6e3d2e077f46" alt=""><figcaption><p>Changing the Image and the Mask Shape</p></figcaption></figure>

## Related Information <a href="#related-information" id="related-information"></a>

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:orange;">Images</mark></td><td></td><td></td><td><a href="../../frequently-used-parts/images">images</a></td></tr><tr><td><mark style="color:orange;">Customizing and formatting</mark></td><td></td><td></td><td><a href="../../customising-and-formatting">customising-and-formatting</a></td></tr></tbody></table>
