FX

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

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.
• Revisiting Radio Buttons in Mobile Applications
  Provides an example of a diagonal linear gradient used as the scene background in a mobile application.
• A Gradient Tutorial
  This non-JavaFX article discusses the general design principles behind creating good gradients.
• Create Visual Appeal in Your UI
  Describes best practices for drop shadows, gradients, and other effects.
• Supported Features for Conversion From Adobe Illustrator to JavaFX
  Supported Features for Conversion From Adobe Photoshop to JavaFX
  You can export shapes with gradients from Adobe Illustrator or Adobe Photoshop to JavaFX format by using JavaFX Production Suite.
• 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: November 2009
[Return to How-To's Home]

---

Do you have comments about this article? We welcome your participation in our community. Please keep your comments civil and on point. You may optionally provide your email address to be notified of replies—your information is not used for any other purpose. By submitting a comment, you agree to these Terms of Use.