CSS-only Acrylic Material from Fluent Design System
EDIT: 2022-05-07 Made backdrop-filter the first option with much better browser support now. I can think of two ways to do this… backdrop-filter on .acrylic for modern browsers Blurred bg on .acrylic for all (including legacy) browsers 1. backdrop-filter on .acrylic (Modern browsers) main { display: flex; align-items: center; justify-content: center; height: 100vh; } .acrylic … Read more