Java FX 2 Linear Gradients

I really didnt understand the concept of multiple linear gradients so I decided to study Jasper’s demo on styling fx buttons with CSS. I picked the example “Large iPad Dark Grey” for this demonstration.

As you can see, multiple gradients make up the glossy button effect. I am visual person so to me this example is stunning.

I was pleasantly surprised at the simplicity after reviewing the CSS styles that create these buttons. I suspect its one thing to say it looks easy but I am sure it requires creativity to blend the colors.

The concept behind building this button is working with multiple linear gradients. The trick is creating multiple layers, each with their own gradient effect and adjusting the background radius and background insets.

#ipad-dark-grey {
    -fx-background-color:
        linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%),
        linear-gradient(#020b02, #3a3a3a),
        linear-gradient(#9d9e9d 0%, #6b6a6b 20%, #343534 80%, #242424 100%),
        linear-gradient(#8a8a8a 0%, #6b6a6b 20%, #343534 80%, #262626 100%),
        linear-gradient(#777777 0%, #606060 50%, #505250 51%, #2a2b2a 100%);
    -fx-background-insets: 0,1,4,5,6;
    -fx-background-radius: 9,8,5,4,3;
    -fx-padding: 15 30 15 30;
    -fx-font-family: "Helvetica";
    -fx-font-size: 18px;
    -fx-font-weight: bold;
    -fx-text-fill: white;
    -fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.2) ,
                1, 0.0 , 0 , 1);
}

Take notice that there is a background inset and background radius that is paired with each linear gradient. In this example there are 5 linear gradients, 5 background-radius settings, and background-insets settings.

The [unattractive] example below color coordinates the matching linear-gradient and background properties together. I hope it helps to visualize the relationship between the linear-gradient and its inset and radius.

In theory, Jasper has layered multiple background fills on top of each other. With each overlay he has reduced the radius and increased the background inset.

-fx-background-color:
    linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%),
    linear-gradient(#020b02, #3a3a3a),
    linear-gradient(#9d9e9d 0%, #6b6a6b 20%, #343534 80%, #242424 100%),
    linear-gradient(#8a8a8a 0%, #6b6a6b 20%, #343534 80%, #262626 100%),
    linear-gradient(#777777 0%, #606060 50%, #505250 51%, #2a2b2a 100%);
-fx-background-insets: 0,1,4,5,6;
-fx-background-radius: 9,8,5,4,3;

How a linear gradient works

Using the example above in orange, here is how a linear gradient works. Starting from the top to the bottom, the first color is #686686 and transitions into color #232723. This consumes the first 25% of the button’s vertical space.

The next color #373837 will consume the next 50% of the button’s vertical space. And finally the color range stops at #757575.

Here is a demo program to show the layering effect one gradient at a time. I go into more detail with CSS button styles for JavaFX 2 apps on my website. Please have a look.

ButtonDemo.java

package ui.layouts.buttons;

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class ButtonDemo extends Application {

    private VBox layout; // This is the root node.

    /**
     * start. Build and show the JavaFX application.
     * @param stage
     */
    @Override
    public void start(Stage stage) {

        layout = new VBox();

        //Set CSS ID
        layout.setId("app");

        //Center in VBox.
        layout.setAlignment(Pos.CENTER);

        //Set Spacing b/n each button.
        layout.setSpacing(10);

        Button b1 = new Button("Example 1");
        b1.setId("b1");

        Button b2 = new Button("Example 2");
        b2.setId("b2");

        Button b3 = new Button("Example 3");
        b3.setId("b3");

        Button b4 = new Button("Example 4");
        b4.setId("b4");

        Button b5 = new Button("Example 5");
        b5.setId("b5");

        layout.getChildren().addAll(b1, b2, b3, b4, b5);

        //Create Scene, add css stylesheet.
        Scene scene = new Scene(layout, 250, 325);
        String cssURL = "ButtonsDemo.css";
        String css = this.getClass().getResource(cssURL).toExternalForm();
        scene.getStylesheets().add(css);

        //Set stage properties.
        stage.setScene(scene);
        stage.setTitle("CSS Buttons");
        stage.show();
    }

    /**
     * Application Entry Point.
     * @param args
     */
    public static void main(String[] args) {
        launch();
    }
}

ButtonsDemo.css

#app {
    -fx-background-color:
    linear-gradient(to bottom, #f2f2f2, #d4d4d4);
}

#b1 {
    -fx-text-fill:white;
    -fx-padding: 15 30 15 30;
    -fx-font-family: "Helvetica";
    -fx-font-size: 18px;
    -fx-font-weight: bold;

    -fx-background-color:
    linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%);
    -fx-background-insets: 0;
    -fx-background-radius: 9;
}

#b2 {
    -fx-text-fill:white;
    -fx-padding: 15 30 15 30;
    -fx-font-family: "Helvetica";
    -fx-font-size: 18px;
    -fx-font-weight: bold;

    -fx-background-color:
    linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%),
    linear-gradient(#020b02, #3a3a3a);
    -fx-background-insets: 0,1;
    -fx-background-radius: 9,8;
}

#b3 {
    -fx-text-fill:white;
    -fx-padding: 15 30 15 30;
    -fx-font-family: "Helvetica";
    -fx-font-size: 18px;
    -fx-font-weight: bold;

    -fx-background-color:
    linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%),
    linear-gradient(#020b02, #3a3a3a),
    linear-gradient(#9d9e9d 0%, #6b6a6b 20%, #343534 80%, #242424 100%);
    -fx-background-insets: 0,1,4;
    -fx-background-radius: 9,8,5;
}

#b4 {
    -fx-text-fill:white;
    -fx-padding: 15 30 15 30;
    -fx-font-family: "Helvetica";
    -fx-font-size: 18px;
    -fx-font-weight: bold;

    -fx-background-color:
    linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%),
    linear-gradient(#020b02, #3a3a3a),
    linear-gradient(#9d9e9d 0%, #6b6a6b 20%, #343534 80%, #242424 100%),
    linear-gradient(#8a8a8a 0%, #6b6a6b 20%, #343534 80%, #262626 100%);
    -fx-background-insets: 0,1,4,5;
    -fx-background-radius: 9,8,5,4;
}

#b5 {
    -fx-text-fill:white;
    -fx-padding: 15 30 15 30;
    -fx-font-family: "Helvetica";
    -fx-font-size: 18px;
    -fx-font-weight: bold;

    -fx-background-color:
    linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%),
    linear-gradient(#020b02, #3a3a3a),
    linear-gradient(#9d9e9d 0%, #6b6a6b 20%, #343534 80%, #242424 100%),
    linear-gradient(#8a8a8a 0%, #6b6a6b 20%, #343534 80%, #262626 100%),
    linear-gradient(#777777 0%, #606060 50%, #505250 51%, #2a2b2a 100%);
    -fx-background-insets: 0,1,4,5,6;
    -fx-background-radius: 9,8,5,4,3;
}