Ventana JavaFX con bordes sombreados

Veamos como podemos modificar completamente la apariencia de una ventana con JavaFX, en esta ocasión crearemos una ventana con un marco redondeado y sombreado con un indicado por nosotros, aplicamos estilos CSS que podemos modificar para cambiar la apariencia de la ventana de nuestro gusto.

Creamos el proyecto JavaFX FXML Application lo llamaremos JavaFXBorderShadow, vamos a la clase principal con el mismo nombre y haremos los siguiente cambios importantes:

De este modo se ve una ventana JavaFX normal, veamos como cambiar su apariencia.

Cambiamos el estilo del Stage a StageStyle.TRANSPARENT

Aplicamos el estilo css del archivo style.css, el mismo contiene el estilo css para el efecto DropShadow que podemos modificar a nuestro gusto.

package javafxbordershadow;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

/**
 *
 * @author Carmelo - Tutor de Programación
 */
public class JavaFXBorderShadow extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        // Quita el marco de la ventana
        stage.initStyle(StageStyle.TRANSPARENT);
        stage.setTitle("Tutor de Programacion");
        // Cargar el documento fxml
        Pane root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));

        Scene scene = new Scene(root);

        // Establecer el color de relleno del Scene a transparente
        scene.setFill(Color.TRANSPARENT);
        // Agregar el archivo de estilos style.css
        scene.getStylesheets().add(getClass().getResource("style.css").toString());
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}

En cuanto a la estructura del archivo fxml hemos colocado un AnchorPane principal que nos sirve para ubicar otro AnchorPane al cual se aplicaremos el efecto DropShadow, dentro de este ubicamos un VBox en el que colocaremos los controles deseados, si deseamos crear una interfaz mas compleja solo reemplazamos el VBox por un GridPane por ejemplo y agregamos los controles que deseamos.

Podemos cambiar el estilo css a nuestro gusto para modificar el color de la sombra, la transparencia, el alto o ancho, el desplazamiento en X o Y, el radio, entre otras opciones.

.root {
    -fx-effect: dropshadow( gaussian, rgba(0, 255, 255, 0.4), 10, 0.5, 0.0, 0.0 );
    -fx-padding: 10; 
    -fx-background-radius: 5;
}

#main {
    -fx-background-color: transparent;  
}

Descargar Proyecto JavaFX