Liquid Glass Component Kit
Beautiful liquid glass effects with advanced SVG filters, specular highlights, and chromatic aberration.
Simply wrap buttons, images, form elements etc. Ensure they are positioned over a BG image, and voila!
Wouldn't have been possible without the incredible work documented here:
https://atlaspuplabs.com/blog/liquid-glass-but-in-css
Use the toggle to see the effects in action.
Glass Effects
SVG Distortion Filter
Buttons
Form Elements
Interactive Glass Panes - Drag to Move
This Entire Card
The liquid glass effect can be applied to any element, including this entire card container.
Usage Examples
// Install the package
npm install liquid-glass
// Import and use
import { applyLiquidGlass } from 'liquid-glass';
// Basic usage
const button = document.querySelector('#myButton');
const cleanup = applyLiquidGlass(button);
// With options
const cleanup2 = applyLiquidGlass(button, {
intensity: 'strong',
animated: true
});
// Apply to multiple elements
import { applyToMultiple } from 'liquid-glass';
const buttons = document.querySelectorAll('.my-buttons');
const cleanupFunctions = applyToMultiple(buttons, { intensity: 'subtle' });
// Cleanup when done
cleanup();
cleanup2();
cleanupFunctions.forEach(fn => fn());
Features
Complete Effects
Specular highlights, backdrop blur, color filters, SVG refraction, edge distortion, ripple effects, and chromatic aberration
Pure Functions
Simple, clean API with pure functions. No classes, no complex state management
Zero Dependencies
Vanilla JavaScript with no external dependencies. Works in any project
Cross-browser
Progressive enhancement with fallbacks for unsupported browsers