MultiPointGradient

Five individually placed color points blended together by proximity — drag each point to shape the gradient

Props

  • colorA

    Color of control point A

    Type
    string
    Default
    #4776E6

  • positionA

    Position of control point A

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

  • colorB

    Color of control point B

    Type
    string
    Default
    #C44DFF

  • positionB

    Position of control point B

    Type
    {x: number, y: number}
    Default
    {"x":0.8,"y":0.2}

  • colorC

    Color of control point C

    Type
    string
    Default
    #1ABC9C

  • positionC

    Position of control point C

    Type
    {x: number, y: number}
    Default
    {"x":0.2,"y":0.8}

  • colorD

    Color of control point D

    Type
    string
    Default
    #F8BBD9

  • positionD

    Position of control point D

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

  • colorE

    Color of control point E

    Type
    string
    Default
    #FF8C42

  • positionE

    Position of control point E

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

  • colorSpace

    Color space for color interpolation

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

  • smoothness

    Controls how smoothly colors blend.

    Type
    number
    Default
    2

Usage

<Shader>
  <MultiPointGradient />
</Shader>