🧊 React Liquid Glass Effect

✨ A lightweight React library for applying a dynamic liquid glass visual effect to any HTML element via a simple Wrapper — with no external dependencies.

🙏 Acknowledgements

A special thanks to Lucas Romero for creating the original SVG effects and styles that inspired this library.

📦 Installation

npm install react-liquid-glass-effect

Or using Yarn:

yarn add react-liquid-glass-effect

🚀 Quick Start

1. Wrap your App with the LiquidGlassProvider

import { LiquidGlassProvider } from 'react-liquid-glass-effect';

const Root = () => (
  <LiquidGlassProvider>
    <App />
  </LiquidGlassProvider>
);

2. Import the CSS styles

import 'react-liquid-glass-effect/dist/react-liquid-glass-effect.css';

3. Use the LiquidGlass wrapper to apply the effect

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

const Component = () => (
  <LiquidGlass>
    <p>Content with a liquid glass effect</p>
  </LiquidGlass>
);

🧠 What does LiquidGlassProvider do?

• Injects the SVG filter into the DOM.
• Provides global context for the effect.

🧠 What does LiquidGlass do?

• Wraps your content in a styled container.
• Applies the liquid glass effect via CSS + SVG.

🧱 Generated DOM Structure

<div class="glass__container">
  <div class="glass__effect"></div>
  <div class="glass__color"></div>
  <div class="glass__shine"></div>
  <div class="glass__content">Your content here</div>
</div>

Custom CSS Classes

You can customize the styles by overriding the following classes in your CSS file:

.glass__container {
  /* Styles for the container */
  border-radius: 10px;
}
.glass__effect {
  /* Styles for the liquid glass effect */
  inset: 2;
}
.glass__color {
  /* Styles for the color overlay */
  background: rgba(55 227 90 / 0.1);
}
.glass__shine {
  /* Styles for the shine effect */
}
.glass__content {
  /* Styles for the content inside the glass effect */
}

LiquidGlass accepts div props for the main container

You can pass any valid HTML attributes to the LiquidGlass component, such as className, style, etc. This allows you to easily customize the appearance and behavior of the glass effect.

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

const Component = () => (
  <LiquidGlass className="custom-class" style={{ padding: '20px' }}>
    <p>Content with a liquid glass effect</p>
  </LiquidGlass>
);

✨ Features

• 🌈 Realistic glass effect using feTurbulence and backdrop-filter
• ⚛️ Works with React 18+
• 🧩 No external dependencies
• 💅 Pure CSS and SVG implementation

🧪 Requirements

• React ^18.0.0 or newer
• Browser support for backdrop-filter and SVG filters

📁 Tech Stack

• React
• TypeScript
• Vite
• SVG Filters

📃 License

MIT © JuanCaCoder

🧑‍💻 Contributing

PRs are welcome! If you have suggestions for improvements or want to help enhance this project, feel free to open an issue or submit a pull request.

🌐 Useful Resources

• MDN: backdrop-filter
• MDN: SVG Filters

⭐ Stay Connected

If you enjoy this library, consider starring the repo, following the creator, or sharing your use case!

📧 Contact

• TikTok
• Instagram
• Kick
• Facebook
• YouTube
• Email

📝 Changelog

For detailed changes, please refer to the CHANGELOG.