Marco Marco - 10 months ago 53
CSS Question

Text styled with CSS does not appear white

I have got this code:

private void createAndAddCommonInformationSection(){
Text text = new Text("CommonText");

The should appear in white color, so I have a CCS-file as follows:

.root {
-fx-base: rgb(50, 50, 50);
-fx-background: rgb(50, 50, 50);
-fx-control-inner-background: rgb(50, 50, 50);

.tab {
-fx-background-color: linear-gradient(to top, -fx-base, derive(-fx-base,30%));

.menu-bar {
-fx-background-color: linear-gradient(to bottom, -fx-base, derive(-fx-base,30%));

.tool-bar:horizontal {
linear-gradient(to bottom, derive(-fx-base,+50%), derive(-fx-base,-40%), derive(-fx-base,-20%));

.button {
-fx-background-color: transparent;

.button:hover {
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-color: -fx-hover-base;

.table-view {

.split-pane:horizontal > * > .split-pane-divider {
-fx-border-color: transparent -fx-base transparent -fx-base;
-fx-background-color: transparent, derive(-fx-base,20%);
-fx-background-insets: 0, 0 1 0 1;

.my-gridpane {
-fx-background-color: radial-gradient(radius 100%, derive(-fx-base,20%), derive(-fx-base,-20%));

.separator-label {
-fx-text-fill: orange;

-fx-text-fill: white;

Everythin is working fine with the CSS-file, except the the color of the text in my code snippet does not appear in the expected color.

I have already tried

-fx-fill: white;


-fx-fill-text: white;

but nothing helps.

What am I doing wrong?

Answer Source

According to the documentation, Text nodes have no default style class. so you need


in order for the text node to match the CSS selector. Then

.text {
    -fx-fill: white ;

will work.

Typically you would use a Label along with the fx-text-fill property if you want to style it with CSS, though adding a style class manually to a Text node should work.