Uncode 2.9.2 introduces the Progressive Blur. This effect is created with layers positioned between the Menu and page content, applying a dynamic blur effect that intensifies progressively. As users scroll, the content beneath the menu transitions smoothly from clear to subtly obscured, creating a modern, dreamy, and immersive visual experience. This technique, inspired by contemporary design trends, enhances focus and depth, bringing a fresh aesthetic to your website.

This effect can be combined with Menu Transparent on Scroll to further separate content from the menu and prevent possible overlaps.

To enable this effect:

Please find below example pages from our demo site:

• Creative Prototype
• Classic Restaurant

• Navigate to Theme Options → General and enable the Blur Progressive option, screenshot ;
• Adjust the settings and values as preferred.
• Note that any value can be used in the Height field, including a clamp value to adjust for mobile, e.g., clamp(35px, 15vh, 200px).

Important: This effect overlays the page content. If you have elements like Fixed Elements that you want to bring forward, you can try using the following CSS. However, note that it may only work in contexts where other scripts do not modify the z-index of page elements:

body:not(.uncode-unmodal-overlay-visible) .main-wrapper {
    z-index: auto;
}