> For the complete documentation index, see [llms.txt](https://docs.flatredball.com/gum/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flatredball.com/gum/gum-tool/tutorials-and-examples/examples/masking.md). # Masking ## Introduction Masking can be achieved to create "cut-out" effects such as rounded corners or images drawn over a circle shape. Masking is performed using render target containers and blend modes. Masking requires at least three objects: 1. A container to hold the masked objects. This container must be a render target container 2. The content to mask, such as a Sprite displaying an image 3. The mask shape, which can be a shape (such as a Circle) or another sprite with alpha that defines the mask ## Creating a Container The first step is to create a container that will be the render target. A render target is required so that the mask can modify the alpha of its sibling in the container. To contain a render target container, add a new Container object to your Screen or Component. If you want your entire Component to be the container, then you can check the Is Render Target variable on the container itself.

## Adding a Sprite Next, add the content that you would like to have the mask applied to. For example, this could be an image. In this case, we will use a Sprite that is displaying a sample image. Add a sprite to your container and set its `Source File` to an image such as .

## Adding the Mask Shape Next, add the shape that you would like to act as the mask. The mask can be an actual shape such as a circle, or it can be another image with custom alpha. For this example we'll use a circle. Add a circle to your container and dock fill it so it takes the entire size of the container.

Next we'll modify the shape so it its alpha can be used. Set these variables: * `Stroke Width` = 0 * `Is Filled` = true (checked) * `Blend` = MinAlpha

The `MinAlpha` value indicates that each pixel should use the minimum alpha, between the alpha that is on the image or the circle. In this case, the image is fully opaque, so the alpha is effectively the alpha of the circle. The outside of the circle shape is fully transparent so it removes the alpha from the image. This same concept can be applied with other shapes, such as rectangles to produce rounded corners on images. The mask uses the whole bounds of the shape, and a shape with both a fill and a stroke masks as one shape. For details see [Whole-Bounds Masking](/gum/gum-tool/gum-elements/general-properties/blend.md#whole-bounds-masking).

--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.flatredball.com/gum/gum-tool/tutorials-and-examples/examples/masking.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.