How-To's > How do I create a drop shadow?

Version: JavaFX 1.3

A drop shadow is an effect that can be applied to any node. This effect renders a shadow of the content that it is applied to. You can specify the color, the radius, and the offset of the shadow.

Access the DropShadow class by using the effect variable in your shape, which is inherited from javafx.scene.Node.

Example Code

Circle {
    effect: DropShadow { offsetY: 4 }
    centerX: 50 centerY: 125
    radius: 30
    fill: Color.ORANGE
    //cache:true
} 

Tips

• Making the drop shadow too "thick" gives the element the look of heaviness. The color of the shadow should be realistic, possibly a few shades lighter than the background color.
• Don't use a very high value for the spread. A ver high value creates a diffused shadow that does not work with most user interface designs.
• If you have multiple objects with drop shadows, orient the drop shadow the same for all of them. The idea is that light is coming from one direction and casting shadows.
• Effects can be expensive to render, and you can cache the node as a bitmap image by applying the variable cache:true. You have a tradeoff between speed of rendering the primitive shape and memory usage for the cached bitmap image. In general, it is beneficial to cache large static nodes or groups of nodes with effects applied.

API Documentation

• DropShadow
• Node

Related How-To Topics

• How do I work with shapes?
• How do I use nodes?

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

---