About Liquid Glass Layer

About This Component

Liquid Glass Layer lets you recreate a fluid, glass-like effect inspired by Apple’s design language, with advanced control over distortion, texture, and visual depth.

Designed as a flexible overlay, the component can be placed on top of any element and adapts perfectly to its size. This makes it ideal for building modern UI elements like buttons, headers, cards, or interactive sections with a rich, dynamic feel.

The effect blends naturally with your background, creating a premium, immersive visual experience.

Demo Preview

Usage Tip

Make sure the parent Stack or Frame is set to Overflow: Visible to properly display shadows.

Depending on how you position the component, you may also need to adjust the z-index to place the glass layer above or below other elements in your layout.

This component is currently not compatible with Firefox and Safari due to browser limitations related to the underlying technique it uses. Support may become possible in future browser updates.

Key Features

Glass Effect

Adjust tint (glass color overlay)
Control blur intensity
Adjust distortion intensity
Customize texture and visual noise
Control depth and fluidity of the effect
Add an inner border effect
Adjust border radius
Customize shadow

Layout & Integration

Designed to fit seamlessly into any layout, the component can be used as a background inside a Stack. Simply position it absolutely (top, left, right, and bottom set to 0) to make it adapt to any size or container, then place your content (text, buttons, etc.) above the glass layer.