# JavaFx LinearGradient Examples

## 1. LinearGradient Introduction

The LinearGradient class helps in applying such a gradient to any JavaFx shapes. In JavaFx, Linear Colour Gradient is applied by an axis in which a colour changes gradually from one point to another point. We call this axis as Gradient Axis. If we draw a line perpendicular to a specific point in the linear gradient axis, all the pixels in the perpendicular axis represents same colour.

## 2. Gradient Axis

Now, let us look at some examples for Gradient Axis. Have a look at the below code:

### Explanation

1. To experiment the gradient fill, we create a rectangle shape with width 400 and height 300.
2. The colour stop defines the offset location and in which a colour change is defined. In our example, we create two `Stop` instances to denote yellow and red colours. In our example, offset 0 and offset 1 defines the start and end point in the gradient axis direction. Note, this is a relative unit.
3. Next, the `LinearGradient` constructor creates the instance. The first two parameter tells the start of the gradient in terms of x and y coordinate values. Second two parameter denotes the end point of the gradient and by referring the picture we can clearly say the gradient in our example is in horizontal direction. Fifth parameter is a boolean & when it is true, the values (First four params) are specified in relative co-ordinate in proportions. For example, our rectangle width is 400. In proportions – 0 means 0, 1 means 400 and 0.5 means 200. The sixth parameter is to specify the Gradient filling cycles, and, in our example, we specified `NO_CYCLE`. After this, we can pass ‘n’ number of Stop instances.
4. Once the LinearGradient object is ready, we pass it to the `setFill` method of the shape.

Running the code will produce the below result. Here, we can see Yellow Stop is at the left as we specified the offset as 0 and Red Stop is towards the right as it has the offset of 1 (Refer Snippet 02).

We can change the Gradient Axis by using the first four parameters. The below picture shows, how we can use first four parameter to change the Gradient Axis and apply the gradient using Yellow, Red Stop objects & their Offset.

## 3. LinearGradient REPEAT Cycle

We already saw the `CycleMethod `constant NO_CYCLE in the previous section. We can use `REPEAT` option to copy the previous gradient along the gradient axis. The code snippet is below:

### Explanation

1. The first gradient point is in the top left corner of rectangle and second gradient point in the top middle of the rectangle as we specified 0.5 in the parameter. This fills the gradient from left edge to middle of the rectangle.
2. Here, we specified the cycle method as `REPEAT` and hence the un-filled portion on the right side of the rectangle is filled with one more gradient which repeats the previous half.

Now look at the code snippet below:

Now at marker location 1, we changed the value to 0.05. This means, we marked the gradient end at 1:20 th location on the gradient axis and we also asked to perform REPEAT cycle to have multiple gradient which repeats along the gradient axis to fill the rectangle completely.

## 4. LinearGradient Reflect Cycle

When we set cycle method as reflect, the fill will happen with a mirror image of the previous fill. Let us change our previous example to have `REFLECT` cycle with same 20 divisions of the gradient area.

### Explanation

1. We set gradient end point at 1:20th location of the rectangular width as we did in our previous code change.
2. This time, we use the `REFLECT` cycle method to apply the gradient on the remaining portion of the rectangle. We can compare this result with the previous one to know how the gradient differs when applied as REPEAT & REFLECT.

## 5. LinearGradient & Multiple Color Stops

In our previous examples, we used only two colours (Red & Yellow) to apply the gradient over the Gradient Axis. It is also possible to use multiple colours stops along the gradient axis. When creating the Stop instances, we can mark the relative location on the axis so that LinearGradient instance will perform colour interpolation between various colours. Now, look at the example below which uses five colours to perform colour gradient on the rectangle.

### Explanation

1. Here, we create five Stop instances to represent five colours on the gradient axis. First parameter passed to the Stop instance tells the relative location of color stop.
2. In the LinearGradient constructor, we decided the Gradient as horizontal and in left->Right direction. Note, we use full rectangle for the gradient and have NO_CYCLE option.
3. Finally, we pass all the Gradient Stops to the variable argument constructor which can receive any number of Stop instances. Also, note the order of the Stop instances are not important as the Stop instances already have the relative location of their color stops.

When we use different cycle option, the color stops are still applied relative to the Main Gradient’s relative dimensions. The below example shows that:

### Explanation

1. We divide the rectangle as 10 parts and apply the gradient to the very first part. This means, we apply the gradient to 1:10th of the rectangle. In that portion, the color stops are applied at five equal intervals (Remember the constructor of Stops – 0, 0.25, 0.5, 0.75 and 1) to make the colour gradient.
2. JavaFx fills the remaining portions of the rectangle using the Reflect cycle method. You can also try with the REPEAT method in this same example.

## Example 2: Linear Gradient with Multiple Colour Stops

Categories: JavaFx

This site uses Akismet to reduce spam. Learn how your comment data is processed.