How-To's > How do I create a linear gradient?

Version: JavaFX 1.3

Set the fill variable for a shape to LinearGradient. This setting causes the shape to be filled by an interpolation of shades between the colors specified. The fill variable is inherited from javafx.scene.Node.

The orientation of the gradient is specified by providing the coordinates of the starting point and endpoint of the gradient. You can also specify stops, which control where the gradient should be at a particular spot.

Example Code

Rectangle {
    x: 125
    y: 10
    width: 100
    height: 100
    fill: LinearGradient {
        startX: 125.0, startY: 0.0, endX: 225.0, endY: 0.0
        proportional: false
        stops: [
            Stop { offset: 0.0 color: Color.web("#1F6592") }
            Stop { offset: 1.0 color: Color.web("#80CAFA") }
        ]
    }
}

Tips

• When you choose colors for a linear gradient, remember that the gradient is intended to convey the presence of a light source. This means that the gradient should be between two colors that are very similar. Avoid dramatic differences in the colors at both ends of the gradients.
• To avoid loss of saturation, choose one color by using a color picker, and choose the second color by moving up or down diagonally.

Examples

• Drawing Basic Shapes in JavaFX
  Demonstrates linear and radial gradients in several basic shapes. Look in Main.fx for the code.
• Building GUI Applications With JavaFX, Lesson 4: Creating Graphic Objects
  This tutorial provides an simple example and description of using built-in graphics, components, and effects in JavaFX Technology.

API Documentation

• LinearGradient

Last Updated: April 2010
[Return to How-To's Home]

---