Glass Navbar Effect in Webflow — Inspired by Apple (No Code, SVG Filter)

Описание: 🚀 Want to recreate Apple’s stunning new liquid glass effect in Webflow?

In this tutorial, I’ll show you step-by-step how to achieve this beautiful look — using only native Webflow tools, a simple SVG filter, and no extra code.

🔹 What you’ll learn:

✅ How to structure a layered navbar for realistic glass effects
✅ How to apply and tweak SVG filters for smooth liquid distortion
✅ How to fine-tune shadows, tint, and contrast
✅ How to create an elegant, modern UI — no libraries required!
✅ How to understand the basics of displacement maps, Gaussian blur, and turbulence in SVG filters

👉 Perfect for designers who want to push Webflow further and bring a touch of Apple magic to their projects.

Everything is fully clonable — and you’ll find the project link below!

Enjoy! 😊

📂 Helpful Resources:

Supasaito: https://www.supasaito.com/en?utm_sour...
Link to the cloneable: https://webflow.com/made-in-webflow/w...
Full Localization Site | Webflow University: https://webflow.com/made-in-webflow/w...

🔥 If you liked the video, feel free to leave a comment, hit the like button, and subscribe to my channel. 😁

---

My Webflow public profile:
https://webflow.com/@francescocastro

We can talk on LinkedIn:
  / francescocastronuovo  

Or we can get to know each other on X:
https://x.com/francescoflow

Or why not? Even on Instagram:
  / francescocastronuovo  

---

0:00 Intro
1:21 Preparing the navbar for the glass effect
4:14 Adding Subtle Shadows to Create Depth
5:37 Structuring the Liquid Glass Layers
7:59 Adding the Shine Layer and Fixing the Corners
10:51 Applying the SVG Filter
14:07 Final Adjustments & Filter Tweaks
19:02 Outro

#webflow #madeinwebflow #nocode #svg #webflowtutorial