# Building a GlassPaneBase Control in JavaFX > How to implement a reusable glassmorphism surface in JavaFX using the Control–Skin architecture. - URL: https://foojay.io/today/building-a-glasspanebase-control-in-javafx/ - Published: 2026-11-02 - Authors: Libán Bande González - Categories: JavaFX, Library Glassmorphism remains one of the most requested visual styles in modern desktop applications. Soft translucency, subtle depth and clean borders create a sense of polish that opaque panels rarely achieve. JavaFX does not provide a built-in glass surface. Creating one that feels professional requires more than a semi-transparent background and a blur effect. It needs a clean public API, a well-structured skin, and the ability to host real content. This article shows how to build a reusable `GlassPaneBase` control that can serve as the foundation for cards, side panels, dialogs and any surface that should look like frosted glass. The same approach is used in the Vitra UI library. ## Control API This is the basic structure of the control because it requires a lot of code. All visual responsibility lives in the skin. ```java public class GlassPaneBase extends Control { // Regular variables private final ObservableList glassChildren = FXCollections.observableArrayList(); private final ObjectProperty backdropSource = new SimpleObjectProperty<>(this, "backdropSource"); private final BooleanProperty liveBackdrop = new SimpleBooleanProperty(this, "liveBackdrop", false); private final ReadOnlyIntegerWrapper backdropRevision = new ReadOnlyIntegerWrapper(this, "backdropRevision", 0); @Override protected Skin createDefaultSkin() { return new GlassPaneBaseSkin(this); } //More code goes here. } ``` This separation keeps application code clean and makes the control easy to extend later. ## Skin structure The visual tree is composed of several layered regions: ```java public class GlassPaneBaseSkin extends SkinBase { private static final double LIVE_FRAME_NANOS = 1_000_000_000.0 / 30.0; //The root of the glass pane. protected final Pane layerStack = new Pane(); //Flat frosted color. protected final Rectangle blurSource = new Rectangle(); //A tint for the blurred image. protected final Rectangle tintLayer = new Rectangle(); //The borders of the glass pane. protected final Rectangle borderLayer = new Rectangle(); //The blurred picture of what is behind the pane. protected final ImageView backdropView = new ImageView(); protected final Pane contentLayer = new Pane(); //Rounded clips of the picture and of the content. They are applied to the layers, not to the control, so the //drop shadow of the layer stack is not cut off. private final Rectangle backdropClip = new Rectangle(); //The clip is on this holder, not on the blurred picture itself: that way the blur never softens the rounded edge. private final Pane backdropHolder = new Pane(); private final Rectangle contentClip = new Rectangle(); private final AnimationTimer liveTimer; private long lastLiveFrame; private boolean refreshPending; private final ListChangeListener