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…

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. How to Set Up 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 Refund Policy 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!

Apple-style Liquid Glass Effect