Component
Liquid Glass Element in Framer
This is a liquid glass element recreated in Framer, inspired by the soft blur and motion seen in Apple-style UIs. It reacts on drag with a smooth frosted effect—bringing depth and polish to any layout. Feel free to remix or drop it into your project to add a tactile, glassy layer.
About the resource
To use the liquid glass component, simply drop it into any frame and adjust its appearance using the built-in controls — no code needed. You can start with preset styles using the Mode setting or switch to custom mode to fine-tune every detail. Adjust the Scale to control how fluid and warped the glass distortion feels, and use Blur, Frost, and Alpha to shape the level of transparency and depth. Customize the Radius and Border to define the shape and edge thickness, while Lightness and Dispersion let you play with brightness and color separation.
You can also set a custom Border Color for the gradient edge. All properties are tweakable in the right panel — perfect for creating a subtle touch or a bold glassy effect in your layout.
About the resource
To use the liquid glass component, simply drop it into any frame and adjust its appearance using the built-in controls — no code needed. You can start with preset styles using the Mode setting or switch to custom mode to fine-tune every detail. Adjust the Scale to control how fluid and warped the glass distortion feels, and use Blur, Frost, and Alpha to shape the level of transparency and depth. Customize the Radius and Border to define the shape and edge thickness, while Lightness and Dispersion let you play with brightness and color separation.
You can also set a custom Border Color for the gradient edge. All properties are tweakable in the right panel — perfect for creating a subtle touch or a bold glassy effect in your layout.
About the resource
To use the liquid glass component, simply drop it into any frame and adjust its appearance using the built-in controls — no code needed. You can start with preset styles using the Mode setting or switch to custom mode to fine-tune every detail. Adjust the Scale to control how fluid and warped the glass distortion feels, and use Blur, Frost, and Alpha to shape the level of transparency and depth. Customize the Radius and Border to define the shape and edge thickness, while Lightness and Dispersion let you play with brightness and color separation.
You can also set a custom Border Color for the gradient edge. All properties are tweakable in the right panel — perfect for creating a subtle touch or a bold glassy effect in your layout.
The liquid glass component properties in Framer.
The liquid glass component properties in Framer.
The liquid glass component properties in Framer.
