Glasses
CSS, SVG, WebGL, and Three.js liquid glass effects for React, Next.js, TypeScript, and vanilla JavaScript. Interactive demos with live controls.
Liquid Glass Sphere
Apple & Figma-style liquid glass sphere with GLSL refraction, animated color blobs, and organic noise distortion. Pure WebGL — no Three.js required.
Glassmorphism Card
Classic glassmorphism card with backdrop-filter blur, saturation boost, semi-transparent tint, and subtle border. The most popular glass UI pattern for modern web design.
Gradual Blur
A liquid blur effect using layered backdrop filters with gradient masks. Perfect for hero sections, image overlays, and content fades.
Three.js Transmission Glass
Realistic 3D glass torus using Three.js MeshTransmissionMaterial with refraction, chromatic aberration, and organic distortion. Built with @react-three/fiber and @react-three/drei.
Apple Liquid Glass
Native Apple Liquid Glass using the -apple-visual-effect CSS property from iOS 26. Works in Safari on iOS 26+ with backdrop-filter blur fallback for other browsers.
SVG Liquid Distortion
Organic distortion using SVG feTurbulence and feDisplacementMap filters. No WebGL — works everywhere, animates with SMIL.
Frosted Glass Soft Edges
Frosted glass with soft feathered edges using CSS mask-image and radial-gradient. The blur fades smoothly toward the edges instead of having a hard border.
SVG Backdrop Refraction
Applies an SVG filter chain (feTurbulence + feDisplacementMap + feGaussianBlur) via backdrop-filter: url(#filter) for glass-like refraction of background content. Chromium only.