Creating Visual Effects in JavaFX

Previous
Next

4 Creating a Drop Shadow

A drop shadow is an effect that renders a shadow of the content to which it is applied. You can specify the color, the radius, the offset, and some other parameters of the shadow.

Figure 4-1 shows the shadow effect on different objects.

Figure 4-1 Drop Shadow Example

Description of Figure 4-1 follows
Description of "Figure 4-1 Drop Shadow Example"

Example 4-1 shows how to create a drop shadow on text and a circle.

Example 4-1 Text and Circle With Shadows

import javafx.collections.ObservableList;
import javafx.application.Application;
import javafx.scene.*;
import javafx.stage.*;
import javafx.scene.shape.*;
import javafx.scene.effect.*;
import javafx.scene.paint.*;
import javafx.scene.text.*;
 
public class HelloEffects extends Application {
 
    Stage stage;
    Scene scene;

    @Override public void start(Stage stage) {
        stage.show();

        scene = new Scene(new Group(), 840, 680);
        ObservableList<Node> content = ((Group)scene.getRoot()).getChildren();
 
        content.add(dropShadow());        
        stage.setScene(scene);    }
static Node dropShadow() {
        Group g = new Group();
 
        DropShadow ds = new DropShadow();
        ds.setOffsetY(3.0);
        ds.setOffsetX(3.0);
        ds.setColor(Color.GRAY);
 
        Text t = new Text();
        t.setEffect(ds);
        t.setCache(true);
        t.setX(20.0f);
        t.setY(70.0f);
        t.setFill(Color.RED);
        t.setText("JavaFX drop shadow effect");
        t.setFont(Font.font("null", FontWeight.BOLD, 32));
 
        DropShadow ds1 = new DropShadow();
        ds1.setOffsetY(4.0f);
        ds1.setOffsetX(4.0f);
        ds1.setColor(Color.CORAL);
 
        Circle c = new Circle();
        c.setEffect(ds1);
        c.setCenterX(50.0f);
        c.setCenterY(325.0f);
        c.setRadius(30.0f);
        c.setFill(Color.RED);
        c.setCache(true);
 
        g.getChildren().add(t);
        g.getChildren().add(c);
        return g;
    }
    public static void main(String[] args) {
        Application.launch(args);
    }
}

Tip:

  • Making the drop shadow too wide gives the element the look of heaviness. The color of the shadow should be realistic, usually a few shades lighter than the background color.

  • If you have multiple objects with drop shadows, orient the drop shadow the same for all of the objects. A drop shadow gives the appearance of a light coming from one direction and casting a shadow on objects.

Previous
Next