Recently I received a design with a translucent white background, overlapping a picture. The overlapping area was blurred. On searching for a solution, I came to know about glassmorphism design trend in CSS.
This introduced me to the CSS
For my use,
backdrop-filter: blur(8px) did the trick. You can find a demo on Codepen.
During my research, I also came across this handy generator: https://glassmorphism.com/
You can read more about
backdrop-filter on MDN.
Photo used in social media banner by Annie Spratt on Unsplash.