<!--
{
  "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-Vertical",
  "metadataVersion" : "0.1.0",
  "role" : "ShaderGraph Node",
  "symbol" : {
    "kind" : "ShaderGraph Node",
    "modules" : [
      "ShaderGraph"
    ],
    "preciseIdentifier" : "Shader_ND_ramptb_float"
  },
  "title" : "Ramp Vertical"
}
-->

# Ramp Vertical

A top-to-bottom linear value ramp (gradient) generator.

## Parameter Types

**Ramp Vertical (float):**

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

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

**Ramp Vertical (vector3f):**

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

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

**Ramp Vertical (vector4f):**

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

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

**Ramp Vertical (color4f):**

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

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

**Ramp Vertical (vector2h):**

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

|Output|Type    |
                |------|--------|
                |`Out` |Vector2h|

**Ramp Vertical (vector2f):**

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

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

**Ramp Vertical (color3f):**

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

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

**Ramp Vertical (vector3h):**

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

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

**Ramp Vertical (vector4h):**

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

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

**Ramp Vertical (half):**

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

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

## Parameter Descriptions

- `Top`: The top value of the interpolation.
- `Bottom`: The bottom value of the 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 interpolation to create a vertical ramp or gradient from two values. Any point within the output ramp is a mix of the two values. A given point is more similar to the value that its vertical position is closer to.
Below is a an example of a simple node graph that uses `Ramp Vertical` to create a color gradient:

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

The image below shows the resulting texture, along with the color values on either side:

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