Create Realistic Liquid Glass UI with RealGlass Library

RealGlass is a JavaScript library that uses p5.js and html2canvas to generate realistic, highly customizable Liquid Glass (Glassmorphism) effects.

This library transforms a standard DOM element into a glass-like surface that blurs and refracts the content behind it.

This is useful for building modern interfaces with layered elements like modals, sidebars, or header bars.

Features

• Realistic glass simulation with physics-based light refraction and chromatic aberration
• Customizable optical properties including index of refraction, thickness, and edge smoothness
• Dynamic lighting system with adjustable light position and intensity controls
• Flexible masking support using custom images, canvas elements, or HTML elements
• Performance optimization through shared page screenshots across multiple instances
• Extensive configuration options for frosting, tinting, border radius, and specular highlights

See it in action:

How to use it:

1. Download the package and load the ‘RealGlass.standalone.js’ script in the document.

<script src="RealGlass.standalone.js"></script>

2. You can then apply the Liquid Glass effect to any element on your page. The process involves two main asynchronous calls: init() and apply().

// 1. Get the target element
const myElement = document.getElementById('my-glass-element');
// 2. Create a new RealGlass instance
const realGlass = new RealGlass();
// 3. Initialize. This screenshots the page content.
await realGlass.init();
// 4. Apply the effect with your desired configuration
await realGlass.apply(myElement, {
  // options here
});

3. Reuse the initial instance if you have multiple glass elements. Creating a new RealGlass() instance from scratch for each element will re-run html2canvas every time, which is slow. Instead, pass the first instance into the constructor for subsequent ones.

// Create another element, reusing the first instance's screenshot
const anotherGlassElement = document.getElementById('another-one');
const anotherRealGlass = new RealGlass(realGlass); // Pass the original instance
// No need to call init() again
await anotherRealGlass.apply(anotherGlassElement, {
  // options here
});

4. Customize the Liquid Glass effect with the following configuration options.

• frosting: Controls the background blurriness. A value of 0 is clear, while 1 is heavily blurred. (Default: 0)
• chromaticAberration: Sets the amount of color fringing, simulating lens dispersion. (Default: 0.5)
• glassOpacity: Defines the opacity of the glass layer itself, from 0 (transparent) to 1 (opaque). (Default: 0.0)
• lightStrength: Adjusts the intensity of the specular and edge lighting effects. (Default: 2.175)
• lightX / lightY: Sets the normalized position of the light source on the X and Y axes, from 0 to 1. (Default: 0.7 / 0.3)
• edgeSmoothness: Controls how soft the edges of the glass shape appear. (Default: 2.0)
• ior: The Index of Refraction. This property controls how much light bends as it passes through the glass. (Default: 1.52)
• borderRadius: The corner radius of the glass shape in pixels. (Default: 50)
• specularShininess: Manages the size and intensity of the specular highlight on the glass surface. (Default: 32)
• thickness: Simulates the thickness of the glass, which affects the refraction distance. (Default: 1.0)
• tintColor: Tints the glass with a specific color. It accepts a hex string or an [r, g, b] array. (Default: [1, 1, 1])
• tintStrength: Sets the strength of the tintColor from 0 (no tint) to 1 (full tint). (Default: 0.0)
• useMask: A boolean. If set to true, the library will use a custom mask instead of a rounded rectangle. (Default: false)
• maskImage: An image or canvas element to use as a custom mask for the glass shape. (Default: null)
• maskElement: An HTML element to generate a mask from. (Default: null)
• maskSmoothing: Defines the blur radius applied to a custom mask for softer, anti-aliased edges. (Default: 0.15)

await realGlass.apply(myElement, {
  width: maskWidth,
  height: maskHeight,
  chromaticAberration: 0.5,
  frosting: 0,
  glassOpacity: 0.0,
  lightStrength: 2.175,
  lightX: 0.7,
  lightY: 0.3,
  edgeSmoothness: 2.0,
  ior: 1.52,
  borderRadius: 50,
  specularShininess: 32,
  thickness: 1.0,
  rotationX: 0.0,
  rotationY: 0.0,
  rotationZ: 0.0,
  scaleTransform: 1.0,
  tintColor: [1.0, 1.0, 1.0],
  tintStrength: 0.0,
  useMask: useMask,
  maskSmoothing: 0.15,
  maskSmoothingInset: 0.1,
});

FAQs

Q: What is the Liquid Glass effect?
A: Liquid Glass is a modern UI effect promoted by Apple, that builds upon glassmorphism. It combines the optical properties of glass with a sense of fluidity and motion. The key feature is “lensing,” which dynamically warps and bends light to create a more organic, responsive feel, as if the UI element is a drop of liquid. This effect is typically applied to top-level UI components like toolbars and navigation elements that float above the main content, creating a clear functional layer.

Q: What is Glassmorphism design?
A: Glassmorphism is a UI design style where elements have a frosted, translucent, or “virtual glass” appearance. The core of the effect is a background blur combined with semi-transparency, which makes elements look like they are floating over the content behind them. This technique creates a sense of depth and helps establish a visual hierarchy for the interface. First popularized around 2020, it is now used by major companies like Apple and Microsoft to give interfaces a clean, modern, and futuristic look.

Q: Does RealGlass work with dynamically changing content?
A: The library captures page content during initialization, so dynamic changes won’t be reflected in the glass effect. You’ll need to call init() again after significant content changes to update the background image.

Q: What’s the browser compatibility for RealGlass?
A: The library requires modern browsers that support p5.js and html2canvas. IE11 and older browsers aren’t supported due to canvas API limitations and ES6 syntax usage.

Q: How does RealGlass affect page performance?
A: It has a noticeable startup cost. The init() call uses html2canvas to render the DOM to a canvas, which can be slow on complex pages. The rendering itself uses WebGL via p5.js, which is generally fast but still requires GPU resources. The best practice of reusing the main instance for multiple elements is essential for performance.

Q: Does it work with any CSS border-radius?
A: The library uses its own borderRadius parameter to create the shape, which is then applied as a mask. It doesn’t automatically detect the CSS border-radius of the target element. You must provide the value in the configuration object to ensure the visual shape matches the element’s actual boundary.