How to set background insets only for one side in JavaFX?

Issue

This CSS code (taken from here):

.custom-node {
    -fx-background-color: skyblue, derive(skyblue, 25%), derive(skyblue, 50%), derive(skyblue, 75%);
    -fx-background-insets: 20, 40, 60, 80;
    -fx-border-color: red; /* set border to red*/
    -fx-border-width: 3; /* border width 3px */
}

gives such result:

Now I want to have this "color ladder" only(!) for bottom side. So I set insets to

-fx-background-insets: 0, 0, 20 40 60 80, 0;

But it didn't work - the whole node is in one color. Could anyone say how to do it?

Solution

You have four background colors defined.

Each comma separated value for -fx-background-insets defines the inset for the respective background color.

-fx-background-color: skyblue, derive(skyblue, 25%), derive(skyblue, 50%), derive(skyblue, 75%);
-fx-background-insets: 0 0 20 0, 0 0 40 0, 0 0 60 0, 0 0 80 0;

The description of the syntax for background insets is in the CSS reference.

A series of size values or sets of four size values, separated by commas. A single size value means all insets are the same. Otherwise, the four values for each inset are given in the order top, right, bottom, left. Each comma-separated value or set of values in the series applies to the corresponding background color.

Alternately, you could use a linear gradient and a single background.

Answered By - jewelsea