Glass Background

Glass Background is a customizable glassmorphism component for Framer that creates modern translucent surfaces with blur, tint, depth, highlights, and distortion effects.

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.

Multi-lens for your layout