Liquid Glass Background Component
Liquid Glass Background is a customizable glassmorphism component for Framer that creates modern translucent surfaces with blur, tint, depth, highlights, and distortion effects. It is designed for building polished UI layers such as floating cards, navigation backgrounds, buttons, overlays, badges, panels, and decorative glass shapes.
Use Cases
Use this component anywhere you want a premium glass effect over page content, images, gradients, or video backgrounds. It works well for hero overlays, navbar glass, product cards, floating menus, CTA buttons, modal backgrounds, and soft visual accents in Apple-style or futuristic interfaces.
Modes
The component includes multiple glass modes:
Liquid Glass (CSS): A lightweight CSS glass style with blur, tint, and layered inset shadows for a soft liquid-glass look.
Low Res Blur: A simple blurred translucent layer for subtle frosted-glass effects.
Advanced Glass (CSS): A richer CSS/SVG-based glass mode with lens displacement, refraction, bevels, specular highlights, and chromatic/rainbow edge effects.
Liquid OGL Glass: A WebGL-powered mode with animated-style lighting, dispersion, refraction, frost, and stronger optical depth.
Customization
You can adjust the glass radius, blur strength, tint color, tint opacity, shadow size, and shadow opacity. Advanced Glass mode adds controls for bevel depth, bevel width, magnification, refraction, specular intensity, rainbow highlights, and shadow offset. OGL mode includes controls for light angle, light brightness, depth, dispersion, frost, and refraction.
Best For
This component is best for designers who want flexible glass effects without rebuilding complex blur, shadow, and refraction layers by hand. It gives you several visual styles in one component, from clean frosted blur to advanced refractive glass.
Liquid Glass Background Component
Liquid Glass Background is a customizable glassmorphism component for Framer that creates modern translucent surfaces with blur, tint, depth, highlights, and distortion effects. It is designed for building polished UI layers such as floating cards, navigation backgrounds, buttons, overlays, badges, panels, and decorative glass shapes.
Use Cases
Use this component anywhere you want a premium glass effect over page content, images, gradients, or video backgrounds. It works well for hero overlays, navbar glass, product cards, floating menus, CTA buttons, modal backgrounds, and soft visual accents in Apple-style or futuristic interfaces.
Modes
The component includes multiple glass modes:
Liquid Glass (CSS): A lightweight CSS glass style with blur, tint, and layered inset shadows for a soft liquid-glass look.
Low Res Blur: A simple blurred translucent layer for subtle frosted-glass effects.
Advanced Glass (CSS): A richer CSS/SVG-based glass mode with lens displacement, refraction, bevels, specular highlights, and chromatic/rainbow edge effects.
Liquid OGL Glass: A WebGL-powered mode with animated-style lighting, dispersion, refraction, frost, and stronger optical depth.
Customization
You can adjust the glass radius, blur strength, tint color, tint opacity, shadow size, and shadow opacity. Advanced Glass mode adds controls for bevel depth, bevel width, magnification, refraction, specular intensity, rainbow highlights, and shadow offset. OGL mode includes controls for light angle, light brightness, depth, dispersion, frost, and refraction.
Best For
This component is best for designers who want flexible glass effects without rebuilding complex blur, shadow, and refraction layers by hand. It gives you several visual styles in one component, from clean frosted blur to advanced refractive glass.
Jijo M
