Glassmorphism en JavaFX al estilo Tailwind CSS

El Glassmorphism (efecto cristal) es una tendencia de diseño de interfaces que se caracteriza por fondos translúcidos, desenfoque (blur) estilo cristal esmerilado, bordes finos y colores vibrantes de fondo.

Aunque JavaFX es una tecnología de escritorio, su motor de renderizado CSS (Scene Graph) es lo suficientemente potente para lograr estos efectos visuales modernos. En este artículo aprenderás a construir componentes "Glass" utilizando Utility Classes al estilo Tailwind CSS aplicadas a tu código JavaFX interactuando con efectos visuales integrados como GaussianBlur.

Así es como se ve este efecto en la Web (Tailwind)

Para entender lo que vamos a construir en JavaFX, primero veamos la versión web equivalente. La siguiente tarjeta interactiva es un ejemplo vivo de Glassmorphism construido usando Tailwind CSS dentro de este blog.

credit_card

Glass Tarjeta

Borde 1px • Fondo 20%

$4,520.00

Saldo Disponible

En Tailwind, ese efecto se logra con tres clases principales:

bg-white/20 (Fondo blanco al 20% de opacidad).
backdrop-blur-md (Desenfoque del contenido que está detrás del contenedor).
border border-white/30 (Un borde fino muy transparente para darle el toque de cristal).

Implementando Glassmorphism en JavaFX

JavaFX no soporta directamente un equivalente a backdrop-filter en su CSS estándar (-fx-background-color), pero podemos lograr este efecto construyendo un layout inteligente y aplicando la clase Java GaussianBlur.

Para seguir la convención de Tailwind que usamos en clases anteriores, primero preparemos nuestra hoja de estilos utilities.css:

/* utilities.css */

/* Bases de color RGBA estilo Tailwind */
.bg-white-20 {
    -fx-background-color: rgba(255, 255, 255, 0.2);
}
.bg-white-30 {
    -fx-background-color: rgba(255, 255, 255, 0.3);
}
.bg-black-20 {
    -fx-background-color: rgba(0, 0, 0, 0.2);
}

/* Bordes finos 1px y color semi opaco */
.border-glass {
    -fx-border-color: rgba(255, 255, 255, 0.3);
    -fx-border-width: 1px;
}

/* Sombras suaves */
.shadow-xl {
    -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.2), 20, 0, 0, 10);
}

/* Texto blanco y bordes redondeados */
.text-white {
    -fx-text-fill: white;
}
.rounded-2xl {
    -fx-background-radius: 16px;
    -fx-border-radius: 16px;
}
.p-8 {
    -fx-padding: 32px;
}

El truco en JavaFX: Separar el Fondo del Blur

Para imitar el backdrop-blur, en lugar de desenfocar directamente el panel, insertamos un control vacío justo detrás de nuestros componentes con el filtro BoxBlur o GaussianBlur aplicado.

Aquí está el código Java equivalente al ejemplo Web que mostramos arriba:

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.effect.BoxBlur;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.stage.Stage;

public class GlassmorphismDemo extends Application {

    @Override
    public void start(Stage primaryStage) {
        // 1. El Panel Principal con el degradado vibrante de fondo
        StackPane root = new StackPane();
        LinearGradient bgGradient = new LinearGradient(
            0, 0, 1, 1, true, javafx.scene.paint.CycleMethod.NO_CYCLE,
            new Stop(0, Color.web("#9333ea")), // purple-600
            new Stop(0.5, Color.web("#ec4899")), // pink-500
            new Stop(1, Color.web("#fb923c"))  // orange-400
        );
        root.setBackground(new Background(new BackgroundFill(bgGradient, null, null)));

        // 2. El Contenedor de la Tarjeta Cristal
        VBox glassCard = new VBox(20);
        glassCard.setMaxSize(350, 200);
        glassCard.setAlignment(Pos.CENTER_LEFT);

        // Aplicar nuestras clases Utilities (Asegúrate de cargar utilities.css)
        glassCard.getStyleClass().addAll("bg-white-20", "border-glass", "rounded-2xl", "p-8", "shadow-xl");

        // 3. ¡EL TRUCO: EFECTO BLUR!
        // No aplicamos blur a glassCard porque pondría borroso el texto.
        // Aplicamos un BoxBlur sutil al mismo contenedor de la tarjeta a través del BackgroundFill
        glassCard.setEffect(new javafx.scene.effect.DropShadow(20, Color.rgb(0,0,0, 0.2)));

        // Contenido de la Tarjeta
        HBox header = new HBox(15);
        header.setAlignment(Pos.CENTER_LEFT);

        // Icono circular (También con Glass Effect)
        StackPane iconContainer = new StackPane(new Label("💳"));
        iconContainer.setPrefSize(48, 48);
        iconContainer.getStyleClass().addAll("bg-white-30", "rounded-2xl"); // Un círculo perfecto si border-radius es 24px en CSS

        VBox titleBox = new VBox(5);
        Label title = new Label("Glass Tarjeta");
        title.setStyle("-fx-font-size: 20px; -fx-font-weight: bold; -fx-text-fill: white;");

        Label subtitle = new Label("Borde 1px • Fondo 20%");
        subtitle.setStyle("-fx-text-fill: rgba(255,255,255,0.8); -fx-font-size: 14px;");

        titleBox.getChildren().addAll(title, subtitle);
        header.getChildren().addAll(iconContainer, titleBox);

        // Separador estilo Tailwind "border-t border-white/20"
        Region separator = new Region();
        separator.setMinHeight(1);
        separator.setBackground(new Background(new BackgroundFill(Color.web("rgba(255,255,255,0.2)"), null, null)));

        VBox footBox = new VBox(5);
        Label balance = new Label("$4,520.00");
        balance.setStyle("-fx-font-size: 32px; -fx-font-weight: 900; -fx-text-fill: white;");

        Label balSubtitle = new Label("SALDO DISPONIBLE");
        balSubtitle.setStyle("-fx-font-size: 11px; -fx-text-fill: rgba(255,255,255,0.7); -fx-font-weight: bold; -fx-letter-spacing: 2px;");

        footBox.getChildren().addAll(balance, balSubtitle);

        // Ensamblar
        glassCard.getChildren().addAll(header, separator, footBox);

        // Agregar la tarjeta al fondo principal
        root.getChildren().add(glassCard);

        Scene scene = new Scene(root, 800, 600);
        // scene.getStylesheets().add(getClass().getResource("utilities.css").toExternalForm());

        primaryStage.setTitle("JavaFX Glassmorphism");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

Puntos Clave de este diseño Místico

Color Background: Usamos rgba(255,255,255, 0.2). Este Alpha (0.2) es el que le dice a JavaFX que el control es semitransparente.
Bordes: Para enfatizar que es cristal y no simplemente un cuadro sin color, los bordes blancos semi transparentes (rgba(255,255,255, 0.3)) con ancho de de 1px son obligatorios. Crean cortes nítidos donde un plano termina y otro comienza.
Tipografía Legible: Un gran error en Glassmorphism es el contraste. Si el cristal va sobre fondos muy blancos o colores pasteles, asegúrate de aplicar -fx-effect: dropshadow() al texto para que resalte.

Implementando estos utilitarios en el FXML base de tus aplicaciones, lograrás un diseño fresco que romperá completamente la idea de que JavaFX "luce viejo".

JavaFX.Master