Liquid Glass
An interactive demo of an iOS 26–style Liquid Glass effect for the web.
Tweak inner shadows, tint, frost blur, noise distortion, and swap out the background image—all live in your browser.
🔗 Live Demo
Try it out here → https://liquid-glass-eta.vercel.app/
🚀 Features
- Inner Shadow: Control blur, spread, and color.
- Glass Tint: Apply any RGB tint with adjustable opacity.
- Frost Blur: Adjust the backdrop-filter blur for a frosty effect.
- Noise Distortion: Modify SVG noise frequency and strength.
- Background Image: Use your own URL for the page backdrop.
- Responsive Design: Works well on both desktop and mobile layouts.
🛠 Usage
- Open
index.htmlin Chrome on macOS. Note that this has not been tested on Safari.
Installation Steps
To get started, follow these steps:
Clone the Repository: Use the following command to clone the repository to your local machine.
git clone https://github.com/omer42009/liquid-glass.gitNavigate to the Directory: Change into the project directory.
cd liquid-glassOpen the HTML File: Launch the
index.htmlfile in Chrome.You can do this by dragging the file into your Chrome browser or by using the
File > Openmenu in Chrome.Explore the Features: Use the controls provided in the demo to adjust the effects. Play around with the inner shadow, glass tint, frost blur, and more.
🎨 Customization Options
You can customize the Liquid Glass effect to fit your needs. Here’s how:
Inner Shadow
- Blur: Adjust the blur radius to soften the shadow.
- Spread: Control how far the shadow extends.
- Color: Choose any color for the shadow effect.
Glass Tint
- RGB Tint: Input any RGB value to change the color of the glass.
- Opacity: Set the transparency level to achieve the desired look.
Frost Blur
- Backdrop-Filter: Change the blur intensity to create a frosty appearance behind the glass.
Noise Distortion
- Frequency: Tweak the frequency of the noise effect.
- Strength: Adjust how strong the noise appears on the glass.
Background Image
- Custom URL: Replace the background with your own image by pasting a URL into the designated field.
📦 Dependencies
This project uses basic HTML, CSS, and JavaScript. There are no external libraries required.
🐞 Reporting Issues
If you encounter any issues or have suggestions for improvements, please file an issue on the Issues page. Your feedback is valuable and helps improve the project.
🔄 Contributing
Contributions are welcome! If you would like to help improve the Liquid Glass effect, please follow these steps:
Fork the Repository: Click the "Fork" button at the top right of the repository page.
Create a New Branch: Make a new branch for your feature or bug fix.
git checkout -b feature/your-feature-nameMake Your Changes: Edit the files as needed.
Commit Your Changes: Save your changes with a descriptive commit message.
git commit -m "Add your message here"Push to Your Fork: Push your changes to your forked repository.
git push origin feature/your-feature-nameOpen a Pull Request: Go to the original repository and open a pull request. Describe your changes and why they are beneficial.
📅 Changelog
For a list of changes and updates, please check the Releases section. This will help you stay informed about the latest features and fixes.
🖥 Browser Support
Currently, the Liquid Glass effect works only on Chromium (Blink) based browsers. This includes:
- Google Chrome
- Microsoft Edge
- Opera
Note: It does not work on WebKit or Gecko browsers, such as Safari or Firefox.
🗂 Project Structure
Here’s a brief overview of the project structure:
liquid-glass/
├── index.html # Main HTML file
├── styles.css # Styles for the demo
└── script.js # JavaScript for interactivity
📖 License
This project is licensed under the MIT License. See the LICENSE file for details.
🌐 Additional Resources
For more information on CSS effects and web design, consider checking out the following resources:
Feel free to explore the Liquid Glass effect, customize it to your liking, and share your creations! If you have any questions or need assistance, don’t hesitate to reach out. Enjoy!
