Adding blur and transparency effect to navbar Apple Clone

Apr 21 • Help

Can anyone suggest what I might be missing. To get the slightly transparent effect on the nav bar for the Apple Clone, I have tried several ways such as RGB(22 22 23 .1) and up to RGB(22 22 23 .5) however, this changes the navbar from a slight black to a slight gray. On scroll, the blur effect can be seen but when the scroll reaches a light-colored background it changes the nav bar color to match the background. Example CSS: background-color: RGB(22 22 23 .1);

backdrop-filter: blur(20px); I also tried using opacity: .5 etc. but no luck. The nav bar will not remain it's intended black color when using these settings. I created this effect once on another website without problems. Maybe codepen is the issue? Using the Blur setting by itself doesn't seem to have much of an effect.

12 comments