The <radial-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 radiating from a central point. The <radial-gradient>
data type is generated by the radial-gradient()
CSS function.
Positional parameters of the gradient can place the focus outside of the bounds of a region, but the gradient itself will only be painted within the visible bounds of the container.
Warning
This JavaFX CSS data type has the associated warnings:
Data types
Unlike in standard web CSS, <radial-gradient>
is not a specialisation of <image>
.
The radial-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
/* Radius at top-left of region */
radial-gradient(radius 55% , red, blue);
/* Radius at in center of region */
radial-gradient(center 50% 50% , radius 55% , red, blue);
/* Radius in bottom-right quadrant
Focus instructions create "shining" effect */
radial-gradient(focus-angle 45deg, focus-distance 45%, center 50% 50% , radius 55% , red, blue);
/* Radius in bottom-right quadrant,
Cycling creates a 'halo' effect around the gradient */
radial-gradient(focus-angle 45deg, focus-distance 45%, center 50% 50% , radius 55% , reflect, red, blue);
Values
The JavaFX CSS interpreter isn’t a fully-compliant CSS Interpreter, nor does it support all CSS-values you might expect for the related CSS property.
<radial-gradient>
can have the following values:
Value | Description |
---|---|
focus-angle | An <angle> parameter that should be used alongside focus-distance to create an effect of the radial gradient ‘shining’ in one direction. |
focus-distance | A <percentage> paratmeter used alongside focus-angle. |
center | A <point> parameter used to define the center of the gradient relative to the parent container |
radius | Defined as a <length> or <percentage>, it defines the outer extent of the color gradient (the point at which the final color stop is applied) |
[repeat | reflect] | Cycling instructions, which define the behaviour of the gradient after the final color stop has been applied at the radius distance from the center. |
color-stop | A <color>and optionally a position as a <length> or <percentage> |