React Liquid Glass

A React component for creating realistic liquid glass containers using SVG refraction and backdrop filters.

Inspired by Apple's Liquid Glass design language and based on the original web implementation: https://github.com/archisvaze/liquid-glass

Live Demo

Try it out → react-liquid-glass-container-demo-rho.vercel.app

Installation

npm install react-liquid-glass-container

Usage

import { LiquidGlass } from 'react-liquid-glass-container';

export default function App() {
    return (
        <LiquidGlass
            style={{
                width: 220,
                height: 130,
                borderRadius: 24,
            }}
            thickness={80}
            bezel={50}
            ior={1.5}
            blur={1.3}
            specular={0.55}
        >
            <p>Anything can go here.</p>
        </LiquidGlass>
    );
}

Props

| Prop | Default | Description | | ----------- | ------- | ----------------------------------------------------------------- | | style | - | Set the size, position and borderRadius of the glass container. | | className | - | Additional CSS classes. | | children | - | Content rendered inside the glass. | | as | "div" | HTML element to render. | | thickness | 80 | Controls the apparent thickness of the glass. | | bezel | 60 | Width of the refractive edge. | | ior | 1.5 | Index of refraction. Higher values create stronger distortion. | | blur | 0.3 | Blur applied before the refraction effect. | | specular | 0.55 | Intensity of the edge highlights. |

Browser Support

The full liquid glass effect currently works in Chromium-based browsers, including:

• Chrome
• Edge
• Arc
• Brave
• Opera

Safari and Firefox gracefully fall back to a standard blurred glass effect. The component and its contents continue to render normally, but without the SVG-based refraction.

License

MIT © Archis Vaze