RadialGradient

Radial gradient radiating from a center point

Props

  • colorA

    The starting color at the center of the gradient

    Type
    string
    Default
    #ff0000

  • colorB

    The ending color at the edge of the gradient

    Type
    string
    Default
    #0000ff

  • stops

    Multi-stop gradient colors (overrides Color A / Color B when set)

    Type
    object
    Default
    null

  • center

    The center point of the radial gradient

    Type
    {x: number, y: number}
    Default
    {"x":0.5,"y":0.5}

  • radius

    The radius of the gradient (normalized, 0.0-1.0)

    Type
    number
    Default
    1

  • repeat

    Number of times the gradient repeats. Values above 1 create concentric rings.

    Type
    number
    Default
    1

  • aspect

    Stretches the gradient into an ellipse. Values below 1 compress vertically, above 1 compress horizontally.

    Type
    number
    Default
    1

  • skewAngle

    Rotates the ellipse axis in degrees. Only visible when Aspect is not 1.

    Type
    number
    Default
    0

  • colorSpace

    Color space for color interpolation

    Type
    "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
    Default
    linear

Usage

<Shader>
  <RadialGradient
    radius={1}
  />
</Shader>