Currently I have this css which simply creates a transparent blur effect:
width: 300px;
height: 300px;
position: absolute;
background-color: rgba(30, 30, 30, 0.7);
-webkit-backdrop-filter: blur(3px);
The problem is that this results in a hard border edge. What I need is to have a soft / fading top border with the transparency intact.
A similar question was made here but it's for Flutter and not CSS: How to clip the BackdropFilter with smooth edges?
My question is, how can I have a smooth / fading top border whilst keeping the transparency blur effect intact? This will be used for a fixed mobile footer that will scroll along, so I can't use a placeholder image.
Thanks!