# Alpha

## Introduction

`Alpha` controls an instance's transparency. A fully opaque instance has an `Alpha` of 255. A fully transparent instance has an `Alpha` of 0.

<figure><img src="https://2695663588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_fzQmxQ1VeUFHcoo2c%2Fuploads%2Fgit-blob-33552952213bd3d66e3157d714d74203455a08ca%2Fimage.png?alt=media" alt=""><figcaption><p>Sprites with Alpha of 255, 200, 150, 100, 50, and 0</p></figcaption></figure>

An object's transparency is a combination of its `Alpha`, [Blend](https://docs.flatredball.com/gum/gum-tool/gum-elements/general-properties/blend), and its [Source File](https://docs.flatredball.com/gum/gum-tool/gum-elements/sprite/source-file). Skia elements may also have transparent portions due to their shape (such as [ColoredCircle](https://docs.flatredball.com/gum/gum-tool/gum-elements/skia-standard-elements/coloredcircle) and [RoundedRectangle](https://docs.flatredball.com/gum/gum-tool/gum-elements/skia-standard-elements/roundedrectangle)) as well as [dropshadows](https://docs.flatredball.com/gum/gum-tool/gum-elements/skia-standard-elements/general-properties/has-dropshadow).

## Alpha and Children

By default the Alpha property affects the selected instance only - it does not cascade down to its children. For example, the following shows a parent white ColoredRectangle with a child blue ColoredRectangle. If the white ColoredRectangle's `Alpha` property changes, the BlueRectangle's opacity does not change.

<figure><img src="https://2695663588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_fzQmxQ1VeUFHcoo2c%2Fuploads%2Fgit-blob-042557aed841ecd86a23370eb5907138e80ee92a%2F10_10%2002%2003.gif?alt=media" alt=""><figcaption><p>Parent Alpha does not change child opacity</p></figcaption></figure>

A parent can affect its children's transparency if the parent is a container with `Is Render Target` set to true. For example, if the white rectangle is added to a Container, the Container can make its entire contents transparent.

<figure><img src="https://2695663588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_fzQmxQ1VeUFHcoo2c%2Fuploads%2Fgit-blob-e1e8a390d49e6662ddaec4987fe30c6fb006269e%2F11_05%2030%2025.gif?alt=media" alt=""><figcaption><p>Entire Container Alpha makes all children transparent</p></figcaption></figure>

Note that by setting Is Render Target to true, the entire container's Alpha can be adjusted rather rather than the alpha value cascading to each individual child. This Alpha value is used to control transparency *after* all children have been drawn. We can see the difference between a partially-transparent Container and each child individually being made partially transparent by overlapping two children ColoredRectangles.

The rectangles on the left each have an `Alpha` value of `255`. These rectangles are in a Container `Is Render Target` set to true and an `Alpha` set to `128`.

The rectangles on the right each have an `Alpha` of `128`, so the red rectangle is visible behind the blue rectangle.

<figure><img src="https://2695663588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_fzQmxQ1VeUFHcoo2c%2Fuploads%2Fgit-blob-246f05dc0ca4669059fd7e8c8f0925769b75390a%2Fimage%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1).png?alt=media" alt=""><figcaption><p>Container Alpha on the left, individual Alpha on the right</p></figcaption></figure>
