<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.
This JavaFX CSS data type has the associated warnings:
Unlike in standard web CSS,
<radial-gradient> is not a specialisation of
Check individual CSS properties to check which data types are appropriate.
/* 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);
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:
|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>|