How to make this blur?

Fixed

halimjr

/** Apply blur by default **/
.App-header, .App-navigation {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(15px) saturate(150%);
}
/** Or apply blur only when the page is scrolled **/
.scrolled .App-header, .scrolled .App-navigation {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(15px) saturate(150%);
}

If you need to change the background color, don't forget to add opacity.

clarkwinkelmann

Please do not mention users directly if they are not part of the conversation.

What do you mean by "this" blur. Did you see this feature on an existing website? Can you describe how that feature works? Is it just a random spot of light on top of the header or is there some logic to their presence?

Fixed

halimjr Thanks!

Fixed

halimjr Is there a way to show it even on mobile?

halimjr

Fixed I have updated my CSS code above. The blur effect on the scrolled page looks better. You may still need to adjust text color to make this beautiful.

Fixed

halimjr Thanks 🐐