<!--
{
  "availability" : [
    "iOS: 17.0.0 -",
    "iPadOS: 17.0.0 -",
    "macCatalyst: 17.0.0 -",
    "macOS: 14.0.0 -",
    "tvOS: 26.0.0 -",
    "visionOS: 1.0.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "ShaderGraph-Docs",
  "identifier" : "/documentation/ShaderGraph/Compositing/Overlay",
  "metadataVersion" : "0.1.0",
  "role" : "ShaderGraph Node",
  "symbol" : {
    "kind" : "ShaderGraph Node",
    "modules" : [
      "ShaderGraph"
    ],
    "preciseIdentifier" : "Shader_ND_overlay_float"
  },
  "title" : "Overlay"
}
-->

# Overlay

A blend operation that multiplies dark areas and screens light areas.

## Overview

2 * F * B if F < 0.5; 1 - (1 - F)(1 - B) if F >= 0.5

## Parameter Types

**Overlay (float):**

|Input       |Type |
                |------------|-----|
                |`Foreground`|Float|
                |`Background`|Float|
                |`Mix`       |Float|

|Output|Type |
                |------|-----|
                |`Out` |Float|

**Overlay (color4f):**

|Input       |Type         |
                |------------|-------------|
                |`Foreground`|Color4<Float>|
                |`Background`|Color4<Float>|
                |`Mix`       |Float        |

|Output|Type         |
                |------|-------------|
                |`Out` |Color4<Float>|

**Overlay (color3f):**

|Input       |Type         |
                |------------|-------------|
                |`Foreground`|Color3<Float>|
                |`Background`|Color3<Float>|
                |`Mix`       |Float        |

|Output|Type         |
                |------|-------------|
                |`Out` |Color3<Float>|

**Overlay (half):**

|Input       |Type|
                |------------|----|
                |`Foreground`|Half|
                |`Background`|Half|
                |`Mix`       |Half|

|Output|Type|
                |------|----|
                |`Out` |Half|

## Parameter descriptions

- `Foreground`: The foreground input. Represented by `F` in the mathmatical equation.
- `Background`: The background input. Represented by `B` in the mathmatical equation.
- `Mix`: The weight of the blend operation. The higher the value of `Mix`, the more apparent the effect of the blend operation. The default value is `1`. Values outside of the range `0-1` produce an undefined effect outside of the node’s intended function.

## Discussion

The `Overlay` node has one of two effects:

- If `F+B` is less than `0.5`, then the node outputs a value of `2*F*B`.
- If `F+B` is greater than or equal to `0.5`, then it outputs`1-(1-F)(1-B)`, which creates the same visual effect as the [`Screen`](/documentation/ShaderGraph/Compositing/Screen) node.
  Visually the node makes dark areas of the blended texture even darker and light areas of the blended texture even lighter.

Below is an example of a simple node graph that uses the `Overlay` node to blend two images together into a single material:

![](images/ShaderGraph-Docs/OverlayGraph.png)

Below are two images and their resulting blended texture applied to a cube:



![](images/ShaderGraph-Docs/OverlayMaterial1.png)



![](images/ShaderGraph-Docs/ScreenMaterial1.png)

![](images/ShaderGraph-Docs/OverlayMaterial2~dark.png)

---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)