Skip to main content

GradientPaint

interface GradientPaint extends PaintProps {
type: 'gradient-linear' |
'gradient-radial' |
'gradient-angular' |
'gradient-diamond'

gradientHandlePositions: [Vector, Vector, Vector]
gradientStops: ColorStop[]
}

interface ColorStop {
position: number
color: Color
}

interface Vector {
x: number
y: number
}

type: 'gradient-linear' | 'gradient-radial' | 'gradient-angular' | 'gradient-diamond'

The type of gradient paint.


gradientHandlePositions: [Vector, Vector, Vector]

The positioning of the gradient within the layer.

This field contains three vectors, each of which are a position in normalized object space (normalized object space is if the top left corner of the bounding box of the object is (0, 0) and the bottom right is (1,1)).

  1. The first position corresponds to the start of the gradient (value 0 for the purposes of calculating gradient stops)
  2. The second position is the end of the gradient (value 1)
  3. The third position determines the width of the gradient.

gradientStops: ColorStop[]

Array of colors and their position within the gradient.


Examples

Gradient Linear

Gradient Linear

  <Rectangle
width={100}
height={100}
fill={{
type: "gradient-linear",
gradientHandlePositions: [
{ x: 0, y: 0.5 },
{ x: 1, y: 1 },
{ x: 0, y: 0 }
],
gradientStops: [
{ position: 0, color: { r: 1, g: 0.4, b: 0.4, a: 1 } },
{ position: 1, color: { r: 1, g: 0.7, b: 0.4, a: 1 } }
]
}}
cornerRadius={8}
/>

Gradient Radial

Gradient Radial

  <Rectangle
width={100}
height={100}
fill={{
type: "gradient-radial",
gradientHandlePositions: [
{ x: 0.5, y: 0.5 },
{ x: 0.5, y: 1 },
{ x: 1, y: 0.5 }
],
gradientStops: [
{ position: 0, color: { r: 1, g: 0.4, b: 0.4, a: 1 } },
{ position: 1, color: { r: 1, g: 0.7, b: 0.4, a: 1 } }
]
}}
cornerRadius={8}
/>

Gradient Angular

Gradient Angular

  <Rectangle
width={100}
height={100}
fill={{
type: "gradient-angular",
gradientHandlePositions: [
{ x: 0.5, y: 0.5 },
{ x: 1, y: 0.5 },
{ x: 0.5, y: 1 }
],
gradientStops: [
{ position: 0, color: { r: 1, g: 0.4, b: 0.4, a: 1 } },
{ position: 1, color: { r: 1, g: 0.7, b: 0.4, a: 1 } }
]
}}
cornerRadius={8}
/>

Gradient Diamond

Gradient Diamond

  <Rectangle
width={100}
height={100}
fill={{
type: "gradient-diamond",
gradientHandlePositions: [
{ x: 0.5, y: 0.5 },
{ x: 0.5, y: 1 },
{ x: 1, y: 0.5 }
],
gradientStops: [
{ position: 0, color: { r: 1, g: 0.4, b: 0.4, a: 1 } },
{ position: 1, color: { r: 1, g: 0.7, b: 0.4, a: 1 } }
]
}}
cornerRadius={8}
/>