DEV Community

Cover image for Liquid Glass Shader: WebGL-Powered iOS-Style Glass Effects for JavaScript
jQueryScript
jQueryScript

Posted on

Liquid Glass Shader: WebGL-Powered iOS-Style Glass Effects for JavaScript

Liquid Glass Shader, a WebGL library that creates iOS 26-style glass effects with cursor-reactive distortion.

Key features

  • Fragment shader-based rendering for 60fps performance
  • Three-layer mask system for graduated distortion intensity
  • Real-time lens distortion that tracks mouse movement
  • Built-in gradient lighting for realistic glass refraction
  • Pure JavaScript implementation with no framework dependencies

The setup requires basic WebGL knowledge, but the effect runs smoothly once configured.

Useful for landing pages or portfolio pieces where visual impact matters.

👉 Blog Post

👉 Live Demo

Top comments (0)