Guide
- How-to
- Liquid glass
Guide
- How-to
- Liquid glass
Guide
- How-to
- Liquid glass
How to Create Liquid Glass in Framer
In this Framer blog, I'm bringing you something special: the first proper liquid glass effect for Framer, inspired by Apple's latest design trend. You'll learn how to add this mesmerizing effect to your sites without any coding, and best of all, it's completely free. Whether you love or hate the trend, you can't deny it's taking the design world by storm.
Posted by
Nandi
Table of contents
What is liquid glass?
It’s basically a glass-like distortion effect that reacts in real-time to movement, kind of like dragging a blob of jelly over your screen that warps whatever’s behind it. Let’s dive in.
What is liquid glass?
It’s basically a glass-like distortion effect that reacts in real-time to movement, kind of like dragging a blob of jelly over your screen that warps whatever’s behind it. Let’s dive in.
What is liquid glass?
It’s basically a glass-like distortion effect that reacts in real-time to movement, kind of like dragging a blob of jelly over your screen that warps whatever’s behind it. Let’s dive in.
Liquid glass effect.
Liquid glass effect.
Liquid glass effect.
Grab the component
Grab the Liquid Glass component. You’ll see a little copy button in the top-right corner of the component. Click it. Then, back in Framer, hit Command + V to paste it directly into your canvas. Done. It’s already working.
Use it anywhere
Once it’s on your canvas, the Liquid Glass element acts like a regular frame. You can resize it, move it around, and use it however you want.
Want to create a liquid glass button? Easy:
Create a normal frame with some text.
Paste the Liquid Glass inside that frame.
Set it to absolute position.
Pin it to all sides so it fills the button.
And you’ve got yourself a button that looks like it’s made of living, breathing glass.
Add a drag effect
This part is just for fun, but it really sells the effect. On the right-hand panel in Framer, scroll to the Effects section and enable the drag option.
Now you can click and drag the element around, and watch how the distortion reacts in real time. It works especially well when you have images or text in the background, it warps everything like a ripple through water.
Customize it
By default, the Liquid glass component comes with a preset that mimics the Apple-style liquid glass look.
But if you want to tweak it, just select the element and switch from Preset to Custom in the right panel. You’ll unlock a bunch of controls to fine-tune the distortion, blur, and feel of the glass until it’s exactly what you want.
Grab the component
Grab the Liquid Glass component. You’ll see a little copy button in the top-right corner of the component. Click it. Then, back in Framer, hit Command + V to paste it directly into your canvas. Done. It’s already working.
Use it anywhere
Once it’s on your canvas, the Liquid Glass element acts like a regular frame. You can resize it, move it around, and use it however you want.
Want to create a liquid glass button? Easy:
Create a normal frame with some text.
Paste the Liquid Glass inside that frame.
Set it to absolute position.
Pin it to all sides so it fills the button.
And you’ve got yourself a button that looks like it’s made of living, breathing glass.
Add a drag effect
This part is just for fun, but it really sells the effect. On the right-hand panel in Framer, scroll to the Effects section and enable the drag option.
Now you can click and drag the element around, and watch how the distortion reacts in real time. It works especially well when you have images or text in the background, it warps everything like a ripple through water.
Customize it
By default, the Liquid glass component comes with a preset that mimics the Apple-style liquid glass look.
But if you want to tweak it, just select the element and switch from Preset to Custom in the right panel. You’ll unlock a bunch of controls to fine-tune the distortion, blur, and feel of the glass until it’s exactly what you want.
Grab the component
Grab the Liquid Glass component. You’ll see a little copy button in the top-right corner of the component. Click it. Then, back in Framer, hit Command + V to paste it directly into your canvas. Done. It’s already working.
Use it anywhere
Once it’s on your canvas, the Liquid Glass element acts like a regular frame. You can resize it, move it around, and use it however you want.
Want to create a liquid glass button? Easy:
Create a normal frame with some text.
Paste the Liquid Glass inside that frame.
Set it to absolute position.
Pin it to all sides so it fills the button.
And you’ve got yourself a button that looks like it’s made of living, breathing glass.
Add a drag effect
This part is just for fun, but it really sells the effect. On the right-hand panel in Framer, scroll to the Effects section and enable the drag option.
Now you can click and drag the element around, and watch how the distortion reacts in real time. It works especially well when you have images or text in the background, it warps everything like a ripple through water.
Customize it
By default, the Liquid glass component comes with a preset that mimics the Apple-style liquid glass look.
But if you want to tweak it, just select the element and switch from Preset to Custom in the right panel. You’ll unlock a bunch of controls to fine-tune the distortion, blur, and feel of the glass until it’s exactly what you want.
The liquid glass component properties in Framer.
The liquid glass component properties in Framer.
The liquid glass component properties in Framer.
Heads up: Safari doesn’t support it
Yep… the irony. Liquid glass won’t work in Safari, even though it was popularized by Apple. That’s because the effect uses SVG filters that Safari doesn’t support (at least not yet). If you try opening your Framer site in Safari, it won’t look broken, but it also won’t look “liquid” or “glass.”
So if you’ve got a Safari, heavy audience, maybe use it sparingly or offer a fallback.
Don’t overdo it
Liquid Glass is performance-heavy. All that real-time distortion takes a toll on your browser and device. If you slap it on every element, your site’s going to slow down fast.
Use it for hero sections, buttons, or specific highlights, not as a background effect across the entire page. One or two uses is plenty to impress your visitors without frying their GPUs.
That’s it
This might be the easiest way to add an advanced visual effect to your Framer site. It’s plug-and-play, looks stunning, and totally free. I’ve got this full length tutorial if you’re more of a visual learner and want something more in-depth.
Heads up: Safari doesn’t support it
Yep… the irony. Liquid glass won’t work in Safari, even though it was popularized by Apple. That’s because the effect uses SVG filters that Safari doesn’t support (at least not yet). If you try opening your Framer site in Safari, it won’t look broken, but it also won’t look “liquid” or “glass.”
So if you’ve got a Safari, heavy audience, maybe use it sparingly or offer a fallback.
Don’t overdo it
Liquid Glass is performance-heavy. All that real-time distortion takes a toll on your browser and device. If you slap it on every element, your site’s going to slow down fast.
Use it for hero sections, buttons, or specific highlights, not as a background effect across the entire page. One or two uses is plenty to impress your visitors without frying their GPUs.
That’s it
This might be the easiest way to add an advanced visual effect to your Framer site. It’s plug-and-play, looks stunning, and totally free. I’ve got this full length tutorial if you’re more of a visual learner and want something more in-depth.
Heads up: Safari doesn’t support it
Yep… the irony. Liquid glass won’t work in Safari, even though it was popularized by Apple. That’s because the effect uses SVG filters that Safari doesn’t support (at least not yet). If you try opening your Framer site in Safari, it won’t look broken, but it also won’t look “liquid” or “glass.”
So if you’ve got a Safari, heavy audience, maybe use it sparingly or offer a fallback.
Don’t overdo it
Liquid Glass is performance-heavy. All that real-time distortion takes a toll on your browser and device. If you slap it on every element, your site’s going to slow down fast.
Use it for hero sections, buttons, or specific highlights, not as a background effect across the entire page. One or two uses is plenty to impress your visitors without frying their GPUs.
That’s it
This might be the easiest way to add an advanced visual effect to your Framer site. It’s plug-and-play, looks stunning, and totally free. I’ve got this full length tutorial if you’re more of a visual learner and want something more in-depth.
