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.
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.
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
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.
Drag Liquid Glass Layer onto your canvas
Place it inside your target element (button, header, etc.)
Set position to absolute and stretch it (top, left, right, bottom to 0)
Position content above or below using z-index
Adjust tint, blur, distortion, and texture
Publish
All sales of digital products are final and non-refundable.
If you have any questions about the product, please contact me at hellonostromostudio@gmail.com before completing your purchase. I’m happy to help.
Enjoy!