---
title: "Liquid Glass Layer — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Nostromo Studio · Effects. About This Component Liquid Glass Layer lets you recreate a fluid, glass-like effect inspired by Apple’s design language…"
canonical: "https://framer.elliotli.dev/component/liquid-glass-layer"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Liquid Glass Layer

# Liquid Glass Layer

Apple-style Liquid Glass Effect

[View on Framer](https://framer.com/marketplace/components/liquid-glass-layer/?via=elliot-li)

![Liquid Glass Layer preview image 1](https://framer.elliotli.dev/og/component/liquid-glass-layer/55c45f33ac7a54d5/1600x1200.jpg)

## Summary

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…

## Description

## 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](https://liquidglasslayer-component.framer.website/examples)

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ywkc87d8-J9s0Hf4ULA0aY863pE4FJNcPmHv1xY)](https://liquidglasslayer-component.framer.website/examples)

## 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.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ywkc87d8-roamRPDzvIJs3FLCx33vHE4QNncOZT)

## 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](mailto:hellonostromostudio@gmail.com) before completing your purchase. I’m happy to help.

Enjoy!

## Rank history [How rankings work →](/terms#rankings)

-   All · #6052

## Details

- **Author**: Nostromo Studio
- **Price**: $10.00
- **Published**: 2026-04-28
- **Updated**: 2026-06-13
- **Added**: 2026-04-21
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo