True Liquid Glass Generator

Real WebGL shader implementation with authentic mathematical refraction

WebGL Shader Controls

Refractive Index: 1.33 (η = 0.752)

Air: 1.0, Water: 1.33, Glass: 1.5, Diamond: 2.4

Blur Radius: 3.0

Distortion Strength: 30‰

Curvature: 1.00

Edge Sharpness: 0.40

Glow Intensity: 0.50

Shadow Strength: 0.10

Border Radius: 20px

Width: 300px

Height: 200px

Real-Time WebGL Preview

Initializing WebGL...

Move mouse to control liquid glass position

η: 1.33 | Distortion: 30‰

CSS Approximation

/* Liquid Glass CSS - WebGL Shader Replica */
.liquid-glass {
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: 
    blur(3px) 
    saturate(1.165) 
    contrast(1.12);
  -webkit-backdrop-filter: 
    blur(3px) 
    saturate(1.165) 
    contrast(1.12);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

/* Refraction distortion layer */
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(
    ellipse 150% 150% at 50% 50%,
    rgba(59, 130, 246, 0.3) 0%,
    transparent 70%
  );
  filter: blur(6px);
  animation: liquidRefract 8s ease-in-out infinite;
}

@keyframes liquidRefract {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.15); }
}

/* WebGL Shader Parameters:
 * Refractive Index: 1.33 (eta: 0.752)
 * Distortion Strength: 0.03
 * Curvature: 1
 * Edge Sharpness: 0.4
 */