The gradient render extension can be used in place of a fill render extension to display a graduated fill from one color to another color along a path. This render extension takes two color parameters and two alpha parameters representing the start and end colors and alpha values to display in the gradient.
Gradients can be configured in several different styles, each with its own set of additional parameters.
- Start Color
-
Start color to use for the gradient (number RGB format)
- End Color
-
End color to use for the gradient (number RGB format)
- Start Alpha
-
Start alpha to use for the gradient. The values range from 255 (opaque) to 0 (transparent).
- End Alpha
-
End alpha to use for the gradient. The values range from 255 (opaque) to 0 (transparent).
- Style
-
The style of gradient to render (string). The style corresponds to the one of the following values:
Linear ("linear")
This is a linear gradient that runs horizontally left to right (ltr), right to left (rtl), or vertically top to bottom (ttb), bottom to top (btt), and fills the entire area of the render extension.
Radial ("radial")
This is a gradient that expands outward from the center of the render extension. The size of the radial gradient can be configured with two additional parameters, an inner and an outer radius measured from the center of the gradient.
If the inner radius is 0 then the radial gradient starts at the center and ends at the outer gradient, which if -1 indicates the full extent of the render extension.
If the inner radius is greater than 0, then the gradient starts at a point that far from the center of the render extension, allowing for a donut shape to be created.
Sweep ("sweep")
This gradient is similar to a radial gradient but rather than radiating from the center point, the color gradient moves in an angular fashion from start to finish.
This gradient uses the same radius parameter settings as the radial gradient but has additional start and end angle values that can be configured by the user.