The author introduces Liquid Glassifier, a web tool that replicates Apple’s dynamic Liquid Glass aesthetic from iOS 26, offering an intuitive interface for creating realistic, adaptable web buttons with dynamic refraction effects, available as an open-source Web Component.
Web Components, Svelte framework, CSS backdrop-filter and SVG filters for visual effects
2025-06-16
- website
Highlight 1
Provides a unique and visually appealing implementation of Apple’s Liquid Glass effect that stands out beyond typical glassmorphism.
Highlight 2
Easy integration as a Web Component with no build tools required, simplifying adoption in various web projects.
Highlight 3
Supports both dark and light modes with smart contrast, ensuring usability and aesthetic consistency across themes.
Improvement 1
Browser compatibility issues, particularly limited support for backdrop-filter and SVG filters in Safari, may reduce usability for some users.
Improvement 2
The UI could offer more advanced customization options or presets to cover a broader range of design needs beyond buttons.
Improvement 3
Limited documentation or tutorials on usage and integration could make onboarding harder for less technical users or designers.
Product Functionality
Improve cross-browser compatibility by exploring polyfills or fallback styles to better support Safari. Consider expanding customization options to allow users to design beyond buttons, such as cards or panels.
UI & UX
Enhance the UI with more interactive previews, presets, and detailed controls for effects. Add guided tutorials or tooltips to help new users understand how to customize and implement the effect.
SEO or Marketing
Create dedicated landing pages showcasing use cases and examples of Liquid Glass in real projects. Leverage social media and developer communities like Twitter, Dev.to, and Hacker News with engaging content and demos to increase awareness.
MultiLanguage Support
Add localization support to the interface to cater to non-English speaking users, broadening the potential user base internationally.
- 1
What is Liquid Glassifier?
Liquid Glassifier is a web tool that helps you create buttons and UI elements with Apple's new Liquid Glass effect, featuring dynamic, realistic refraction and depth for the web.
- 2
How do I use Liquid Glassifier in my project?
You can use Liquid Glassifier by copying a simple script tag into your HTML and then using the <sv-liquid-glass> web component in your code. It works with React, Vue, or vanilla JavaScript without needing build tools.
- 3
Does Liquid Glassifier work on all browsers?
While it works well on most modern browsers, some effects like backdrop-filter and SVG filters have limited support in Safari, which may affect the visual quality there.