I saw a beautiful website that has an interesting navbar feature. As you can see in the screenshot below, there is a fade blur effect where we cannot see the “end line” of the background.
So my question is: Can we create something like this in Webflow without using custom code? Even with custom code, I can’t find anything on the internet related to this fade blur background…
In my opinion, there is a combination of a backdrop blur and some linear gradients, but I’ve tried to build it myself in Webflow, and I don’t know how to make that fade.
I’ve tried to reproduce what I saw in the devTools, and it’s not that simple.
My biggest question regarding this nav background blur is not about the linear gradient itself, but about the smooth transition between the blur and other elements. As I mentioned, when trying to replicate those divs, the problem with the bottom of the background remains the same.
ok @martinstoleru I have now build simple example. they using gradient on mask to make it fading like. I have simplified these numbers for you to understand how they work so it is not as “smooth”. You can use their numbers if you need or adjust these to your taste or add more div elements.
You should also check their code as they use this on :after
Hope this hint is clear enough be able to implement it in WF
