How to Implement Glassmorphism via HTML and CSS

Glassmorphism is a new design trend that makes use of a transparent background and a blur effect on top of the background to create a glassy effect. Microsoft also uses this style in the Fluent Design System, but they call it "Acrylic Material" instead of glassmorphism. You can use it for pricing cards, blog cards, profile cards, anything you'd like.