When trying the glassmorphism style and using the css backdrop-filter, I get a dark blurred edge at the top of the element when scrolling. I feel like it should be an easy fix, but I've tried everything I know (which apparently isn't enough) and can't figure it out. I created a pen so you can see what I'm talking about. For some bewildering reason, you have to open it up in codepen to see the undesired effect.
body {
background-image: url("https://www.theuiaa.org/wp-content/uploads/2017/12/2018_banner.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 200vh;
background-color: rgba(255, 255, 255, 0.5);
background-blend-mode: soft-light;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 50%;
}
.card {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
width: 320px;
height: 540px;
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(15px);
}
.arrow {
position: sticky;
top: 0px;
font-size: 200px;
line-height: 1;
color: red;
}
.card p {
font-size: 32px;
padding: 20px;
}<div class="container">
<div class="card">
<div class="arrow"><span>🠑</span></div>
<p>As you can see when you scroll down, as soon as the card hits the top of the screen, you get a blurred edge. Not cool...</p>
</div>
</div>
