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.
Warning
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.
Syntax
/* 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.
