Liquid Glass Layer — Apple-style Liquid Glass Effect

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.

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

1. Drag Liquid Glass Layer onto your canvas

2. Place it inside your target element (button, header, etc.)

3. Set position to absolute and stretch it (top, left, right, bottom to 0)

4. Position content above or below using z-index

5. Adjust tint, blur, distortion, and texture

6. 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!