The <linear-gradient> JavaFX CSS data type is a sub-type of the <paint> data type representing a texture consisting of a transition between two or more colors along a straight line. The <linear-gradient> data type is generated by the linear-gradient() CSS function.

The starting point and end point of the gradient can extend beyond the bounds of a region, but will only be painted within the visible bounds of the region.


This CSS data type has the associated warnings:

Data types

Unlike in standard web CSS, <linear-gradient> is not a specialisation of <image>.

The linear-gradient() function should be used with properties such as -fx-background-color, which are compatible with a <paint> data type, rather than -fx-background-image.

Check individual CSS properties to check which data types are appropriate.


/*  Simple gradient from top to bottom  */
linear-gradient(red, blue);

/*  Linear gradent with directional instruction  */
linear-gradient(to right, red, blue);

/*  Linear gradient with gradient position described using <point> notation */
linear-gradient(from 45% 50% to 65% 50%, red, blue);

/* A gradient with three color stops equally spaced */
linear-gradient(to right, red, blue, green);

/*  A complex, stripy gradient  */
linear-gradient(from 0% 100% to 7% 85%, repeat, red, red 50%, blue 50%, blue 95%, #00FA9A 95%, #00FA9A 100%);

Check out the linear-gradient() CSS function for advice on how to create gradients.

See also: