Liquid Glass Effects

CSS Class Implementation

Basic Container

Static liquid glass container
<div class="liquid-glass"> Static liquid glass container </div>

Link-like

Link-style liquid glass
<a href="#" class="liquid-glass"> Link-style liquid glass </a>

Elevated Style

Elevated liquid glass
<div class="liquid-glass" data-elevated="true"> Elevated liquid glass </div>

Web Component Implementation

Basic Container

Web component container
<liquid-glass> Web component container </liquid-glass>

High Displacement

Strong liquid glass effect
<liquid-glass strength="150" depth="15"> Strong liquid glass effect </liquid-glass>

Chromatic Aberration

With chromatic aberration
<liquid-glass chromatic="20" strength="120"> With chromatic aberration </liquid-glass>

Interactive Button

Interactive button
<liquid-glass interactive strength="100" blur="3"> Interactive button </liquid-glass>

Link Component

Link component
<liquid-glass href="https://example.com" strength="80" depth="8"> Link component </liquid-glass>

Subtle Effect

Subtle glass effect
<liquid-glass strength="50" blur="1" depth="5"> Subtle glass effect </liquid-glass>

Scroll to see the liquid glass effects over different background elements

Over Grid Lines

Notice how the grid blurs

Over Text

Text becomes distorted

Over Shapes

Geometric displacement

Subtle Effect

Light glass effect

Link with Glass Effect

This is a clickable link with liquid glass styling

Interactive Button

Click or press Enter/Space to activate

Scroll Effect Demonstration

As you scroll, notice how the liquid glass elements move over different parts of the fixed background. The grid lines, text, and geometric shapes behind each glass element will show different blur and displacement effects.

The background stays fixed in place while the content scrolls, creating a parallax-like effect that makes the liquid glass processing clearly visible.

Strong Effect Extreme Effect