Blur on NavBar

Implementing Blur on Navbar at the Top of the Page

Category

Article, Inside Portfolio, Design Engineering

When I initially implemented the blur at the top of the page, I faced the bottom sharp cut-off problem. This is the story of how I resolved it, achieving a smooth transition from a gradual blur to a complete fade.

When redesigning my website, I was inspired by effects I’d seen on other↗ designers↗' sites↗. Their implementation of gradients and dynamic visuals served as a great reference point, showing how small design details can elevate user experience. One that caught my attention was the gradual blur effect at the top of the website. After research and experimentation, I successfully implemented it in Figma and later on Webflow. Here, I’ll outline my process, challenges, and solutions to help others achieve a similar effect.

Contribution

Carl Emefo

Lead Product designer 🎨 — (UX Design, Visual Design, Research, Prototyping, Usability testing)

Resources

ChatGPT, Webflow, Reddit, Twitter, and every other source I could get my hand on 😉

Designing the blur effect in Figma

Before getting into how I arrived at this solution on the web, I want to outline my journey from how I visualized it in Figma. This is certainly not the step you might take, but for me, I wanted to see the feature in action first before implementing it on my live website, that way I have a clear idea of the specifications and the potential final outcome.

Step 1 - Setting Up the Blur Container Frame

✦

I created a frame named 'Blur Container', with auto layout set to botom left

✦

Inside this frame, I added a rectangle named 'Blur Gradient' with a height of 100 pixels.

Blur Container

Avoid clipping the 'Blur Container' frame to prevent a sharp cut-off of the blur effect at the bottom.

Step 2 - Applying the Gradient

✦

On the Blur Gradient, I applied a linear gradient starting with a 40% opacity of color 666A6F, transitioning to a 96% opacity of color F5F5F5. (These colors were chosen to match the gray tint I wanted to achieve and the background color of my website, but you can adjust them to suit your preferences)

✦

The entire linear fill was set to 3% transparency to make the gradient color faint and subtle.

Rectangle 'Blur' shape

Linear gradient properties

Step 3 - Enhancing with Blur Effects

✦

On the Blur Gradient, I also applied a 60% Background blur to blur every element that passes beneath it, as well as a 32% Layer blur to blur the rectangle, so it is not exactly visible to the viewer.

Blur effect in action

Blur properties

Step 4 - Positioning

✦

On the Blur Container, I used absolute positioning to fix the frame at the top of the page, ensuring it was always above other elements but behind the website navigation menu.

Figma design snapshot

Positioning properties

This design worked well in Figma. Feedback from peers was positive, and after fine-tuning, I was ready to implement it on Webflow.

"I've seen website with blurred effects at the top, but not like this. I love how the content of the website fades out with a gradual blur 💯"

Going from Figma to Web

When transitioning to Webflow, I encountered several challenges:

The First Attempt

When transitioning to Webflow, I encountered several challenges:

✦

I created a div block named Blur Container.

✦

Inside the Blur Container div block, I added a new div block Blur Gradient to simulate the rectangle in Figma.

✦

I applied the linear gradient fill and height properties on the Blur Gradient div block, BUT…….the result had sharp bottom edges rather than the desired gradual fade. 🤕

Key Issues

✦

Problem 1: Opacity and Gradient Fading
- Unlike Figma, Webflow doesn’t allow you to fade out a gradient’s color directly.
- Adjusting the opacity affected the entire div block rather than just the gradient.

✦

Problem 2: Blur Sharpness
- The blur effect had a sharp cutoff, breaking the smooth transition I wanted.

Outcome after creating & applying the blur effect like I did in Figma

Can apply linear gradient on Webflow, but can't affect the transparency of the fill only

Me asking ChatGPT 'Why me? 😭'

The Solution — A Different Approach: Introducing Stacked Blurred Div Blocks

After some trial and error and help from ChatGPT (To be fair, it did tell me to stack div blocks initially, but I was like wut?!! Applying it how it recommended initially was a disaster 😅), I devised a solution using stacked div blocks of varying heights and blur levels, instead of div blocks with the same height.

Implementation Steps:

✦

Create Div Block Containers:
I created a div block Blur Container.
I created another div block Blur Gradient and put it inside the Blur Container div block

✦

Create Multiple div blocks inside the Blur Gradient div block container:
I used 10 div blocks, each with a different height — 200%, 180%, 165%, 150%, down to 30%.
The smallest div block (30% height) had the highest blur effect.

✦

Stacking the Div Blocks:
The div blocks were stacked from largest (at the top) to smallest (at the bottom), each with varying z-Index ranging from 1 to 10, and for some, the opacity.
Each successive block had a slightly stronger blur effect, creating a gradual fade.

✦

Fine-Tuning the Blur:
The longer div blocks at the top softened the edges of the smaller ones below them, eliminating sharp transitions.
This stacking created a smooth gradient-like blur as users scrolled.

Div blocks created

Properties of the div blocks used, all 10 of them.

Final Result

By layering div blocks with varying heights and blur levels, I achieved a seamless, gradual blur effect. As users scroll, the blur intensifies subtly, creating a visually appealing transition.

Key Takeaways

✦

While Figma simplifies design visualization, implementation on Webflow (or other platforms) may require adjustments.

✦

Stacking elements with varying properties can mimic advanced effects, even when the platform doesn’t support certain features directly.

Why Share This?

During my research, I found limited resources on implementing this specific effect. However, I did come across a few forum threads and articles (one↗, two↗, three↗, four↗, five↗, six↗, seven↗...I could go on and on) discussing the issues and potential workarounds, but they weren't comprehensive enough to solve my problem. These insights, however, provided a useful foundation for my experimentation. By sharing my process, I hope to provide a helpful guide for others facing similar challenges. While my solution might not be perfect, it’s a practical, functional approach that works.

Feel free to adapt this guide to suit your own design tools and projects! Until the next one....

My time is...