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:

ValueDescription
focus-angleAn <angle> parameter that should be used alongside focus-distance to create an effect of the radial gradient ‘shining’ in one direction.
focus-distanceA <percentage> paratmeter used alongside focus-angle.
centerA <point> parameter used to define the center of the gradient relative to the parent container
radiusDefined 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-stopA <color>and optionally a position as a <length> or <percentage>

See Also