# Blend ## Introduction The `Blend` variable controls how the selected instance combines its colors with whatever is drawn before. The final appearance depends on its `Blend`, `Alpha`, `Source File`, and `Color` values. `Blend` is available on the following types: * [ColoredRectangle](https://docs.flatredball.com/gum/gum-tool/gum-elements/coloredrectangle) * [Container](https://docs.flatredball.com/gum/gum-tool/gum-elements/container) (if [Is Render Target](https://docs.flatredball.com/gum/gum-tool/gum-elements/container/is-render-target) is set to true) * [NineSlice](https://docs.flatredball.com/gum/gum-tool/gum-elements/nineslice) * [Sprite](https://docs.flatredball.com/gum/gum-tool/gum-elements/sprite) `Blend` is also available on all Skia elements: * [Arc](https://docs.flatredball.com/gum/gum-tool/gum-elements/skia-standard-elements/arc) * [ColoredCircle](https://docs.flatredball.com/gum/gum-tool/gum-elements/skia-standard-elements/coloredcircle) * [LottieAnimation](https://docs.flatredball.com/gum/gum-tool/gum-elements/skia-standard-elements/lottieanimation) * [RoundedRectangle](https://docs.flatredball.com/gum/gum-tool/gum-elements/skia-standard-elements/roundedrectangle) * [Svg](https://docs.flatredball.com/gum/gum-tool/gum-elements/skia-standard-elements/svg) Most examples on this page overlay a Sprite over ColoredRectangles, but the same `Blend` behavior applies to all items which support the `Blend` variable. ## Normal Blend `Normal` `Blend` is the default value. When an instance uses `Normal` `Blend`, it *interpolates* its color with whatever it draws on top of using its `Alpha` value as a weight. If a `Normal` `Blend` Sprite has an `Alpha` of `255`, then the Sprite completely replaces whatever is below.

Normal Blend Sprite with an Alpha of 255

If a Sprite has an `Alpha` of `128` (roughly half of 255), then it averages its color with whatever is below.

Normal Blend Sprite with an Alpha of 128

A Sprite with an `Alpha` of `25` (roughly 10%) blends with whatever is below, but its color is given a weight of roughly 10%.

{% hint style="info" %} The examples above use the `Alpha` value to apply transparency. Note that if the source file (.png) has transparency as part of the file, the same effect applies. {% endhint %} ## Additive Blend `Additive` `Blend` results in the color of a element being added to whatever is below. This typically results in brighter colors. `Additive` `Blend` can be used to simulate a light. Since `Additive` `Blend` results in a modification of what is under instead of a replacement, an `Additive` `Blend` Sprite typically appear transparent even when `Alpha` is `255`.

Additive Blend Sprite with an Alpha of 255

As `Alpha` is reduced, the brightening effect is reduced. A Sprite with an `Alpha` of `128` only applies roughly half as much of a brightening effect.

Additive Blend Sprite with an Alpha of 128

A Sprite with an `Alpha` of `25` applies a slight brightening effect.

Additive Blend Sprite with an Alpha of 25

Stacking multiple Sprites with `Additive` `Blend` results in the brightening effect stacking as well.

Four Additive Blend Sprites with an Alpha of 255

## Replace Blend `Replace` `Blend` results in the instance completely replacing whatever it is drawn on top of regardless of its `Alpha` or transparency in the source file. A Sprite with no transparency in its source file drawn with `Alpha` of `255` looks the same whether it uses `Replace` or `Normal` `Blend`.

Replace Blend Sprite with an Alpha of 255

Changing the `Alpha` on a Sprite with `Replace` `Blend` does not affect how it is drawn - it is always drawn at full opacity.

Replace Blend Sprite with an Alpha of 128

`Replace` `Blend` results in a Sprite being fully opaque even if its source file has transparency. The following image shows two Sprites displaying the same image.

Normal and Replace Blend on the same source file.

## Alpha-Only Blends Gum supports **Blend** modes which modify the alpha (opacity) of whatever is under the instance using the alpha-only `Blend` . Alpha-only `Blend` modes ignore the color of the instance using the `Blend` - only the alpha matters (see note below about premultiplied alpha). Therefore, the following three circles would behave the same despite having different colors:

Color values are ignored with Alpha-only Blends

{% hint style="warning" %} Runtimes which use premultiplied alpha (such as FlatRedBall) require using objects that are fully white when modifying alpha. Otherwise, the color of the overlaying instance will blend with the underlying object. {% endhint %} Since alpha-only blends operate directly on the alpha of whatever is below, they are only intended to be used on Containers with `Is Render Target` set to true. Usually objects with these blend modes are drawn on top of all other items in the container. For example, the following image shows a RenderTargetContainer which holds a number of items including the AlphaOnlyCircle. AlphaOnlyCircle is an instance which can be used to apply Alpha-only Blends to whatever is below.

AlphaOnlyCircle can be used to modify the alpha of what is below

Using an alpha-only Blend outside of a container with Is Render Target set to true typically results in the instance either being drawn as pure black or being invisible. ## Subtract Alpha Blend **Subtract Alpha** **Blend** subtracts, or "cuts out", the alpha of whatever is below.

Subtract Alpha removing the alpha of what is below

As `Alpha` is reduced, the amount of opacity removed effect is also reduced. A Sprite with an `Alpha` of `128` only removes roughly half as much opacity from what is below.

Reducing Alpha results in less opacity being removed

## Replace Alpha Blend Replace Alpha forcefully sets the opacity of whatever is below. Rather than subtracting alpha, replace can forcefully set the alpha. Replace Alpha with an Alpha value of 255 results in no changes if what is under is already opaque, but it can add alpha if what is under is transparent.

Replace Alpha with Alpha of 255 results in no changes on already-opaque regions, but can add alpha

If `Alpha` is reduced, then the resulting pixels display the explicitly set alpha. The following shows setting alpha explicitly to 128 (about 50%).

Explicitly setting alpha to 128 with Replace Alpha

Setting `Alpha` to `0` forcefully sets whatever is under to fully transparent. This is similar to performing `Subtract Alpha` with an `Alpha` of `255`.

Keep in mind that `Replace Alpha` can apply different alpha values if the instance itself has variable alpha, such as a Sprite with some parts transparent and some parts opaque.

Alpha being replaced to opaque in the center and transparent on the edges of the circle

## Min Alpha `Min Alpha` modifies the underlying object so that the result is the minimum alpha between the instance and what is below. This can be used to create an alpha mask.

If the instance alpha is reduced, then the resulting transparency is reduced as well. The following shows setting `Alpha` to 128 (about 50%).

Keep in mind that multiple objects can be combined to create larger masks. For example, additional ColoredRectangles can be added to the circle above to create a larger mask. Each rectangle also has its `Blend` set to `Min Alpha`.