<!--
{
  "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/2D-Procedural/Ramp-4-Corners",
  "metadataVersion" : "0.1.0",
  "role" : "ShaderGraph Node",
  "symbol" : {
    "kind" : "ShaderGraph Node",
    "modules" : [
      "ShaderGraph"
    ],
    "preciseIdentifier" : "Shader_ND_ramp4_float"
  },
  "title" : "Ramp 4 Corners"
}
-->

# Ramp 4 Corners

A four-point linear value ramp (gradient) generator.

## Parameter Types

**Ramp 4 Corners (float):**

|Input                |Type    |
                |---------------------|--------|
                |`Top Left`           |Float   |
                |`Top Right`          |Float   |
                |`Bottom Left`        |Float   |
                |`Bottom Right`       |Float   |
                |`Texture Coordinates`|Vector2f|

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

**Ramp 4 Corners (color3f):**

|Input                |Type         |
                |---------------------|-------------|
                |`Top Left`           |Color3<Float>|
                |`Top Right`          |Color3<Float>|
                |`Bottom Left`        |Color3<Float>|
                |`Bottom Right`       |Color3<Float>|
                |`Texture Coordinates`|Vector2f     |

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

**Ramp 4 Corners (vector3f):**

|Input                |Type    |
                |---------------------|--------|
                |`Top Left`           |Vector3f|
                |`Top Right`          |Vector3f|
                |`Bottom Left`        |Vector3f|
                |`Bottom Right`       |Vector3f|
                |`Texture Coordinates`|Vector2f|

|Output|Type    |
                |------|--------|
                |`Out` |Vector3f|

**Ramp 4 Corners (half):**

|Input                |Type    |
                |---------------------|--------|
                |`Top Left`           |Half    |
                |`Top Right`          |Half    |
                |`Bottom Left`        |Half    |
                |`Bottom Right`       |Half    |
                |`Texture Coordinates`|Vector2f|

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

**Ramp 4 Corners (vector4h):**

|Input                |Type    |
                |---------------------|--------|
                |`Top Left`           |Vector4h|
                |`Top Right`          |Vector4h|
                |`Bottom Left`        |Vector4h|
                |`Bottom Right`       |Vector4h|
                |`Texture Coordinates`|Vector2f|

|Output|Type    |
                |------|--------|
                |`Out` |Vector4h|

**Ramp 4 Corners (vector3h):**

|Input                |Type    |
                |---------------------|--------|
                |`Top Left`           |Vector3h|
                |`Top Right`          |Vector3h|
                |`Bottom Left`        |Vector3h|
                |`Bottom Right`       |Vector3h|
                |`Texture Coordinates`|Vector2f|

|Output|Type    |
                |------|--------|
                |`Out` |Vector3h|

**Ramp 4 Corners (color4f):**

|Input                |Type         |
                |---------------------|-------------|
                |`Top Left`           |Color4<Float>|
                |`Top Right`          |Color4<Float>|
                |`Bottom Left`        |Color4<Float>|
                |`Bottom Right`       |Color4<Float>|
                |`Texture Coordinates`|Vector2f     |

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

**Ramp 4 Corners (vector4f):**

|Input                |Type    |
                |---------------------|--------|
                |`Top Left`           |Vector4f|
                |`Top Right`          |Vector4f|
                |`Bottom Left`        |Vector4f|
                |`Bottom Right`       |Vector4f|
                |`Texture Coordinates`|Vector2f|

|Output|Type    |
                |------|--------|
                |`Out` |Vector4f|

**Ramp 4 Corners (vector2f):**

|Input                |Type    |
                |---------------------|--------|
                |`Top Left`           |Vector2f|
                |`Top Right`          |Vector2f|
                |`Bottom Left`        |Vector2f|
                |`Bottom Right`       |Vector2f|
                |`Texture Coordinates`|Vector2f|

|Output|Type    |
                |------|--------|
                |`Out` |Vector2f|

**Ramp 4 Corners (vector2h):**

|Input                |Type    |
                |---------------------|--------|
                |`Top Left`           |Vector2h|
                |`Top Right`          |Vector2h|
                |`Bottom Left`        |Vector2h|
                |`Bottom Right`       |Vector2h|
                |`Texture Coordinates`|Vector2f|

|Output|Type    |
                |------|--------|
                |`Out` |Vector2f|

## Parameter descriptions

- `Top left`: The top-left value of the four-point interpolation.
- `Top right`: The top-right value of the four-point interpolation.
- `Bottom left`: The bottom-left value of the four-point interpolation.
- `Bottom right`: The bottom-right value of the four-point interpolation.
- `Texture Coordinates`: The 2D coordinate at which the data is read for mapping the texture onto a surface. The default is to use the current UV coordinates, in which U is the horizontal axis and V is the vertical axis.

## Discussion

This node uses bilinear interpolation to create a ramp from four corner values. Any point within the output ramp is a mix of one of the four corner values. A given point is more similar to a corner value the closer its position is to that corner.
Below is a an example of a simple node graph that uses `Ramp 4 Corners` to create a gradient with four different colors:

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

The image below shows the resulting texture along with the color values on each corner:

![](images/ShaderGraph-Docs/Ramp4Material~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)