Liquid GlassExamples
Liquid GlassExamples
Plain HTML + CDN
Using Liquid Glass without a build step.
Plain HTML + CDN
This example shows how to use Liquid Glass in a simple HTML file by loading the library and styles from a CDN.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liquid Glass Demo</title>
<!-- 1. Load the styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@avenra/liquid-glass/styles" />
<style>
body {
background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
font-family: sans-serif;
}
</style>
</head>
<body>
<!-- 2. Elements with data-attributes -->
<button data-liquid-button data-label="Subscribe"></button>
<div data-liquid-switch data-checked="true"></div>
<div id="volume-slider" style="width: 200px"></div>
<!-- 3. Load the library -->
<script src="https://cdn.jsdelivr.net/npm/@avenra/liquid-glass/dist/liquid-glass.umd.min.js"></script>
<script>
// 4. Initialize auto-wired components
LiquidGlass.init();
// 5. Manual initialization
const { createLiquidSlider } = LiquidGlass;
createLiquidSlider('#volume-slider', { min: 0, max: 100, value: 50 })
.on('input', ({ value }) => console.log('Volume:', value));
</script>
</body>
</html>To run this, simply save the code above as an .html file and open it in your browser.