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}
  />