← Volver

Aplicar estilos CSS en JavaFX

Publicado el 2 de marzo de 2026

Java

A continuación vamos a ver un ejemplo de código CSS para aplicar los estilos a JavaFX.

.root {
    -fx-font-family: "Airstrike";
    -fx-background-color: #2b2b2b;
    -fx-background-image: url("./img/bg.jpg");
    -fx-background-size: cover;
    -fx-background-position: center;
    -fx-background-repeat: no-repeat;
}

.button {
    -fx-padding: 10px;
    -fx-background-color: #0127C7;
    -fx-text-fill: #ffffff;
    -fx-font-size: 18px;
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.5), 10, 0.3, 0, 3);
    -fx-cursor: hand;
}

.button:hover {
    -fx-background-color: #4189ff;
    -fx-cursor: hand;
}

.button:pressed {
    -fx-background-color: #0067ff;
    -fx-cursor: hand;
}

.label {
    -fx-padding: 10px;
    -fx-background-color: #0127C7;
    -fx-text-fill: #ffffff;
    -fx-font-size: 18px;
    -fx-background-radius: 10;
    -fx-border-radius: 5;
    -fx-border-color: #8DA9F6;
    -fx-border-width: 2px;
}

.text-field {
    -fx-padding: 10px;
    -fx-font-size: 18px;
    -fx-alignment: center;
    -fx-background-radius: 5;
    -fx-border-radius: 5;
    -fx-border-color: #8DA9F6;
    -fx-border-width: 2px;
}

.text-field:focused{
    -fx-border-color: #ffffff;
}