Contribution is welcome! Help with the LiqGlass Lib, Be Supportive!
<div id="myGlass"></div>
<script>
// Initialize LiqGlass
const glass = new LiqGlass();
// Create a dynamic glass element
const element = glass.createGlassElement({
blur: 18,
opacity: 0.2,
borderRadius: 25,
gradient: true,
gradientFrom: 'rgba(147, 51, 234, 0.3)',
gradientTo: 'rgba(79, 70, 229, 0.1)',
animated: true,
hoverEffect: true,
className: 'liqglass-card'
});
element.innerHTML = '<h3>Dynamic Glass</h3><p>Created with LiqGlass!</p>';
document.body.appendChild(element);
</script>| Preset | Blur | Opacity | Border Radius | Border Width | Border Opacity | Shadow | Gradient |
|---|---|---|---|---|---|---|---|
| Light | 8px | 0.05 | 12px | 1px | 0.1 | Light | ✖ |
| Medium | 12px | 0.1 | 16px | 1px | 0.2 | Medium | ✖ |
| Heavy | 16px | 0.15 | 20px | 1px | 0.3 | Heavy | ✖ |
| Frosted | 20px | 0.2 | 24px | 2px | 0.4 | Heavy | ✔ |
| Crystal | 24px | 0.08 | 16px | 1px | 0.5 | Heavy | ✔ |
| Bubble | 15px | 0.12 | 50px | 2px | 0.25 | Medium | ✔ |
| Color | Gradient From | Gradient To |
|---|---|---|
| Blue | rgba(59, 130, 246, 0.2) |
rgba(37, 99, 235, 0.1) |
| Purple | rgba(147, 51, 234, 0.2) |
rgba(126, 34, 206, 0.1) |
| Green | rgba(34, 197, 94, 0.2) |
rgba(22, 163, 74, 0.1) |
| Pink | rgba(236, 72, 153, 0.2) |
rgba(219, 39, 119, 0.1) |
| Orange | rgba(249, 115, 22, 0.2) |
rgba(234, 88, 12, 0.1) |
| Red | rgba(239, 68, 68, 0.2) |
rgba(220, 38, 38, 0.1) |
| Yellow | rgba(251, 191, 36, 0.2) |
rgba(245, 158, 11, 0.1) |
| Teal | rgba(20, 184, 166, 0.2) |
rgba(13, 148, 136, 0.1) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiqGlass Frosted Demo</title>
<script src="https://cdn.jsdelivr.net/gh/Quicksilver-Division/LiqGlass-Lib@main/dist/liqglass.min.js"></script>
<style>
body {
margin: 0;
padding: 50px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#demo-container {
width: 400px;
}
h3, p {
margin: 0.5rem 0;
color: white;
}
</style>
</head>
<body>
<div id="demo-container"></div>
<script>
// Get LiqGlass instance
const liqGlass = new LiqGlass();
// Create a frosted glass element
const frosted = liqGlass.createGlassElement({
preset: 'frosted', // Use the frosted preset
animated: true, // Enable smooth animations
hoverEffect: true, // Scale and shadow on hover
className: 'liqglass-card'
});
frosted.innerHTML = `
<h3>Frosted Glass</h3>
<p>Beautiful frosted glass effect with gradient.</p>
`;
// Add to the page
document.getElementById('demo-container').appendChild(frosted);
</script>
</body>
</html>