FX

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

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.

Examples

• Create Visual Appeal in Your UI
  Describes best practices or drop shadows, gradients, and other effects.

API Documentation

• DropShadow
• Node

Related How-To Topics

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

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.