FX

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

Set the fill variable for a shape to RadialGradient. 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.

Example Code

The following code shows what could be considered the default radial gradient—no gradient settings other than the stops. The stops specify the point in the gradient that must be a particular color. There must be at least two stops, with values from 0.0 to 1.0, and the first stop must have the lower value. The spheres shown here are produced by the following code, substituting the following values for stop offset values.

Circle {
    centerX: 50, centerY: 50
    radius: 40
    fill: RadialGradient {
        stops: [
            Stop {
                color : Color.web("#80CAFA")
                offset: 0.0
             }
             Stop {
                 color : Color.web("#1F6592")
                 offset: 1.0
              }
        ]
    }
}

To reverse the light direction, define a circle for the gradient and change the focus. If the proportional variable is set to true, the values for all gradient variables are mapped onto a unit square, with coordinates x=0.0, y=0,0 at the top left and x=1.0, y=1.0 at the bottom right. By default, focus is set to focusX=0.0, focusY=0.0, so the gradient starts in the upper left corner in the previous default example. By changing the values to focusX:1.0, focusY=1.0, the gradient focus starts in the lower right corner.

Circle {
    centerX: 50, centerY: 50
    radius: 40
    fill: RadialGradient {
        proportional:true
        centerX: 0.5
        centerY: 0.5
        focusX: 1.0
        focusY: 1.0
        radius: 1.0
        stops: [
            Stop {
                color : Color.web("#80CAFA")
                offset: 0.2
             }
             Stop {
                 color : Color.web("#1F6592")
                 offset: 1.0
              }
          ]
    }
}

Tips

• By using the unit square for your gradient variable values, you can change the size of your circular object and the gradient will automatically adjust. If you prefer using absolute coordinates instead of the unit square, set proportional to false.
• See the API documentation for more information about how you can change the settings of the gradient variables.
• Avoid using radial gradients for shapes that are not circular, because the purpose of radial gradients is to give a 3-D appearance to a circular shape.
• 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

• Controlling Media Playback
  Demonstrates a media player application with a progress bar. The timeline for this particular progress bar varies the offset of a radial gradient to change the highlighted location in the bar over time.
• Drawing Basic Shapes in JavaFX
  Demonstrates linear and radial gradients in several basic shapes. Look in Main.fx for the code.
• 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.

API Documentation

• RadialGradient

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.