Guide
- How-to
- Glass
- Effect
Guide
- How-to
- Glass
- Effect
Guide
- How-to
- Glass
- Effect
How to Create a Frosted Glass Effect in Framer
In this Framer blog, I'm showing you how to create that trendy frosted glass effect, inspired by augen.pro. You'll learn how to combine blur filters, noise textures, and subtle gradients to achieve that perfect glass morphing effect - all without touching any code. Perfect for creating modern, premium-looking navigation bars and UI elements.
Posted by
Nandi
Table of contents
Why frosted glass works so well
The frosted glass effect isn’t just eye candy, it’s functional design. It makes your navigation (or any UI element) stand out from the background while still letting users see a hint of what’s behind it. The result is a modern, layered look that feels both clean and immersive.
Why frosted glass works so well
The frosted glass effect isn’t just eye candy, it’s functional design. It makes your navigation (or any UI element) stand out from the background while still letting users see a hint of what’s behind it. The result is a modern, layered look that feels both clean and immersive.
Why frosted glass works so well
The frosted glass effect isn’t just eye candy, it’s functional design. It makes your navigation (or any UI element) stand out from the background while still letting users see a hint of what’s behind it. The result is a modern, layered look that feels both clean and immersive.
Frosted glass effect.
Frosted glass effect.
Frosted glass effect.
Set up your navigation
Start by creating a simple navigation bar in Framer. If you already have one, great, you can work with that. Otherwise, just create a frame at the top of your canvas and drop in some placeholder links or a logo. We’ll be focusing on styling the background, not the content.
Add a background blur
Here’s where the magic begins.
Inside your navigation, create a new frame.
Remove its background color so it’s see-through.
Position it using absolute layout and pin it to all sides (top, left, right, bottom set to 0).
Give it a subtle gray tint with lowered opacity (around 80%).
Now, select this frame, head over to the right-hand panel → Styles → Filters, and adjust the Background Blur.
Pro tip: Keep the blur value under 10. Anything higher looks heavy and can slow down your site. A value of 8 usually hits the sweet spot.
At this point, you’ll have a translucent glass-like panel that blurs whatever sits behind it.
Add noise for the frosted look
The frosted finish comes from a noise overlay. Without it, the blur looks a bit too clean and artificial.
Here’s how to add it:
Create another frame inside your blurred background frame.
Name it something like Noise.
Go to Fill → Image → Type → Tile.
Select the Noise preset.
Adjust the scale (50–70% works well).
Lower the opacity and set the blend mode to Overlay.
This creates that subtle frosted texture you see on real glass.
Customize the style
Now you can take the frosted glass effect further with a few extra tweaks:
Opacity → Adjust how transparent the glass feels.
Tint color → Add a slight blue or white tint for a more realistic look.
Gradient → Make the glass fade more at the edges.
Borders & Shadows → Add highlights on one side and subtle shadows on the other to mimic depth.
For example:
Add a thin white border with low opacity.
Use an inside shadow with white on one side and black on the other for a subtle light effect.
These details push the effect closer to real-world glass.
Use it beyond navbars
While this effect looks amazing on navigation bars, don’t stop there. You can apply frosted glass to:
Cards or pop-ups → Make modals feel lighter and more modern.
Floating panels → Perfect for dashboards or sidebars.
Hero sections → Add depth to large layouts without overwhelming the design.
You can stack these effects side by side in a container to achieve a fractal glass effect.
Set up your navigation
Start by creating a simple navigation bar in Framer. If you already have one, great, you can work with that. Otherwise, just create a frame at the top of your canvas and drop in some placeholder links or a logo. We’ll be focusing on styling the background, not the content.
Add a background blur
Here’s where the magic begins.
Inside your navigation, create a new frame.
Remove its background color so it’s see-through.
Position it using absolute layout and pin it to all sides (top, left, right, bottom set to 0).
Give it a subtle gray tint with lowered opacity (around 80%).
Now, select this frame, head over to the right-hand panel → Styles → Filters, and adjust the Background Blur.
Pro tip: Keep the blur value under 10. Anything higher looks heavy and can slow down your site. A value of 8 usually hits the sweet spot.
At this point, you’ll have a translucent glass-like panel that blurs whatever sits behind it.
Add noise for the frosted look
The frosted finish comes from a noise overlay. Without it, the blur looks a bit too clean and artificial.
Here’s how to add it:
Create another frame inside your blurred background frame.
Name it something like Noise.
Go to Fill → Image → Type → Tile.
Select the Noise preset.
Adjust the scale (50–70% works well).
Lower the opacity and set the blend mode to Overlay.
This creates that subtle frosted texture you see on real glass.
Customize the style
Now you can take the frosted glass effect further with a few extra tweaks:
Opacity → Adjust how transparent the glass feels.
Tint color → Add a slight blue or white tint for a more realistic look.
Gradient → Make the glass fade more at the edges.
Borders & Shadows → Add highlights on one side and subtle shadows on the other to mimic depth.
For example:
Add a thin white border with low opacity.
Use an inside shadow with white on one side and black on the other for a subtle light effect.
These details push the effect closer to real-world glass.
Use it beyond navbars
While this effect looks amazing on navigation bars, don’t stop there. You can apply frosted glass to:
Cards or pop-ups → Make modals feel lighter and more modern.
Floating panels → Perfect for dashboards or sidebars.
Hero sections → Add depth to large layouts without overwhelming the design.
You can stack these effects side by side in a container to achieve a fractal glass effect.
Set up your navigation
Start by creating a simple navigation bar in Framer. If you already have one, great, you can work with that. Otherwise, just create a frame at the top of your canvas and drop in some placeholder links or a logo. We’ll be focusing on styling the background, not the content.
Add a background blur
Here’s where the magic begins.
Inside your navigation, create a new frame.
Remove its background color so it’s see-through.
Position it using absolute layout and pin it to all sides (top, left, right, bottom set to 0).
Give it a subtle gray tint with lowered opacity (around 80%).
Now, select this frame, head over to the right-hand panel → Styles → Filters, and adjust the Background Blur.
Pro tip: Keep the blur value under 10. Anything higher looks heavy and can slow down your site. A value of 8 usually hits the sweet spot.
At this point, you’ll have a translucent glass-like panel that blurs whatever sits behind it.
Add noise for the frosted look
The frosted finish comes from a noise overlay. Without it, the blur looks a bit too clean and artificial.
Here’s how to add it:
Create another frame inside your blurred background frame.
Name it something like Noise.
Go to Fill → Image → Type → Tile.
Select the Noise preset.
Adjust the scale (50–70% works well).
Lower the opacity and set the blend mode to Overlay.
This creates that subtle frosted texture you see on real glass.
Customize the style
Now you can take the frosted glass effect further with a few extra tweaks:
Opacity → Adjust how transparent the glass feels.
Tint color → Add a slight blue or white tint for a more realistic look.
Gradient → Make the glass fade more at the edges.
Borders & Shadows → Add highlights on one side and subtle shadows on the other to mimic depth.
For example:
Add a thin white border with low opacity.
Use an inside shadow with white on one side and black on the other for a subtle light effect.
These details push the effect closer to real-world glass.
Use it beyond navbars
While this effect looks amazing on navigation bars, don’t stop there. You can apply frosted glass to:
Cards or pop-ups → Make modals feel lighter and more modern.
Floating panels → Perfect for dashboards or sidebars.
Hero sections → Add depth to large layouts without overwhelming the design.
You can stack these effects side by side in a container to achieve a fractal glass effect.
Stacking the glass component.
Stacking the glass component.
Stacking the glass component.
Just copy the same frame setup and drop it anywhere you want a glassy finish. Here’s the Frosted glass component to make life easier for you.
Wrapping up
And there you have it, that’s how to create a frosted glass effect in Framer without writing a single line of code.
It’s a quick trick, but it instantly makes your site feel more polished and premium. Whether you’re styling a navbar, a card, or a floating element, this effect adds depth and elegance that users notice right away.
Just copy the same frame setup and drop it anywhere you want a glassy finish. Here’s the Frosted glass component to make life easier for you.
Wrapping up
And there you have it, that’s how to create a frosted glass effect in Framer without writing a single line of code.
It’s a quick trick, but it instantly makes your site feel more polished and premium. Whether you’re styling a navbar, a card, or a floating element, this effect adds depth and elegance that users notice right away.
Just copy the same frame setup and drop it anywhere you want a glassy finish. Here’s the Frosted glass component to make life easier for you.
Wrapping up
And there you have it, that’s how to create a frosted glass effect in Framer without writing a single line of code.
It’s a quick trick, but it instantly makes your site feel more polished and premium. Whether you’re styling a navbar, a card, or a floating element, this effect adds depth and elegance that users notice right away.
