Creates a linear gradient between 2 colors.

Properties

Property

Default

Notes

x1

0

 

y1

0

 

x2

100

 

y2

0

 

color1

'black'

 

color2

'white'

 

cycle

false

 

stretch

false

Scales the gradient to fit the Shape's bounds

fit

true

Scales the gradient retaining the aspect ratio

Examples

4 rectangles, each one with a diagonal gradient

rect( x: 0, y: 0, width: 100, height: 100 ){
   gradientPaint( x1: 0, y1: 0, x2: 50, y2: 50 )
}
rect( x: 100, y: 0, width: 100, height: 100 ){
   gradientPaint( x1: 50, y1: 0, x2: 0, y2: 50 )
}
rect( x: 0, y: 100, width: 100, height: 100 ){
   gradientPaint( x1: 0, y1: 50, x2: 50, y2: 0 )
}
rect( x: 100, y: 100, width: 100, height: 100 ){
   gradientPaint( x1: 50, y1: 50, x2: 0, y2: 0 )
}

Different settings for fit, stretch and cycle

gradientPaint( id: 'g1', x1: 0, y1: 0, x2: 50, y2: 50 )
rect( x: 0, y: 0, width: 100, height: 100, fill: g1 )
circle( cx: 150, cy: 50, radius: 50, fill: g1 )
rect( x: 0, y: 100, width: 200, height: 100, fill: g1 )