Documentation

GuidesComponents

MultiPointGradient

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

Props

colorAstring
Default:#4776E6
Color of control point A
positionA{x: number, y: number}
Default:{"x":0.2,"y":0.2}
Position of control point A
colorBstring
Default:#C44DFF
Color of control point B
positionB{x: number, y: number}
Default:{"x":0.8,"y":0.2}
Position of control point B
colorCstring
Default:#1ABC9C
Color of control point C
positionC{x: number, y: number}
Default:{"x":0.2,"y":0.8}
Position of control point C
colorDstring
Default:#F8BBD9
Color of control point D
positionD{x: number, y: number}
Default:{"x":0.8,"y":0.8}
Position of control point D
colorEstring
Default:#FF8C42
Color of control point E
positionE{x: number, y: number}
Default:{"x":0.5,"y":0.5}
Position of control point E
smoothnessnumber
Default:2
Controls how smoothly colors blend.

Usage

<Shader>
  <MultiPointGradient />
</Shader>
Previous
Mirror
Next
Neon