Framer Liquid Glass is a highly customizable Framer component for creating premium glass, lens, and refraction effects directly on the canvas. It can pull visuals from a fullscreen video, uploaded image, captured page content, or a procedural free mode, then bend that source through a realistic glass surface.
The component supports classic rounded rectangles, circles, triangles, stars, hearts, pills, polygons, flowers, and custom SVG or image masks. Every shape uses the same glass treatment system, including refraction, edge bending, bevel depth, frost, tint, opacity, specular highlights, inner shadows, outer shadows, outlines, and adjustable quality settings.
It is built for expressive Framer layouts, product pages, interactive visual experiments, and polished design systems where glass should feel physical rather than like a flat blur. Drag support lets image-mode glass panels move with either the component itself or a parent frame, so custom Framer layouts can move as one designed object. Also supports Safari.
Features
Source Modes
Video source with optional fullscreen background
Image source with optional fullscreen background
Canvas/page capture mode for refracting live Framer layouts
Free mode for standalone glass without an external media source
Upload or URL input support for media sources
Shape System
Freeform rounded rectangle
Circle
Triangle
Diamond
Hexagon
Octagon
Pill
Squircle
Star
Heart
Flower
Custom SVG/image mask support
Contain, cover, and stretch fit options for custom shapes
Padded SDF processing for cleaner custom-shape outlines and shadows
Glass Controls
Refraction
Edge refraction
Magnification
Frost/blur
Dispersion
Bevel depth
Bevel width
Glass opacity
Tint color and tint opacity
Lighting & Edge Effects
Specular highlights
Specular strength
Edge highlight control
Edge darkening control
Shape-aware beveling and rim effects
Outline & Shadows
Outline color
Outline width
Border radius for supported shapes
Outer shadow enable/disable
Outer shadow color
Outer shadow blur
Outer shadow X/Y position
Outer shadow opacity
Inner shadow enable/disable
Inner shadow color
Inner shadow X/Y position
Inner shadow blur
Inner shadow opacity
Interaction
Draggable glass in image mode
Drag the component itself
Drag the parent frame with surrounding Framer content
Optional on-canvas UI controls for live tuning
Framer Workflow
Organized sidebar controls
Grouped controls for source, glass, lighting, color, outline, shadows, interaction, and quality
Works with fixed-size Framer components
Designed for custom Framer layouts and visual compositions
Performance & Quality
Shared WebGL renderer
Adjustable resolution
Layering and z-index controls
Canvas capture rate controls
Scroll recapture settings for canvas mode
Optimized texture handling for media and custom masks
Lee Black
