CSS backdrop-filter

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 backdrop-filter property.

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.