CODEWITHSUNDEEP
javafx-2
Валерий Сиволапенко
Валерий Сиволапенко

Reputation: 107

How to set radial-gradient with css in javafx

I have a Label. Try to set radial-gradient in my css for this lable. How can i do it right? If i set -fx-background-color: radial-gradient(center 50% 50%, radius 50%, rgb(104, 163, 193) 0%, rgb(23, 56, 99) 100%); - I receive an error "mismatched parameters" Thanks for any help!

Upvotes: 2

Views: 8744

Answers (1)

jewelsea
jewelsea

Reputation: 159486

Setting gradients for Shapes

Here is an example I pulled from a small clock widget I wrote a long time ago:

-fx-fill: radial-gradient(radius 180%, burlywood, derive(burlywood, -30%), derive(burlywood, 30%));

The gradient shows up as the circular shading on the clockface just below the center of the clock.

enter image description here

Setting gradients for Labels

As you are using a label, the corresponding css attribute to use to shade the text of the label would be -fx-text-fill for the foreground text and -fx-background-color for the text background.

Here is a sample with -fx-text-fill and -fx-background-color styles applied to a label. The radial gradient used for the background is the same radial gradient that was used for the clock face.

xyzzy

Label label = new Label("xyzzy");
label.setStyle("-fx-background-color: radial-gradient(radius 180%, burlywood, derive(burlywood, -30%), derive(burlywood, 30%)); -fx-text-fill: white;");

Actual parameters to use for your gradient depends on your application

Of course, the configuration of radial gradients will vary depending upon exactly what gradient you wish to draw. Documentation for the syntax an construction of an expression to assign a radial gradient via css is contained in the JavaFX 8 CSS reference guide.

Upvotes: 7

Related Questions