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.