acrylic-material

Microsoft recently revealed their new "fluent" design langauge, and one part of it is the "acrylic" material . This effect makes an element transparent and blurs the background. It can either be applied to a window, such that parts of underlying windows shine though (background acrylic), or to individual elements in the window, so other controls shine through (in-app acrylic). It is conceptually and visually very similar to vibrancy on macOS. It is implemented as a special Brush in XAML, but I wonder it there is a way to use it (background acrylic) in a regular Win32 app? The effect looks very

With the advent of Microsoft's Fluent Design System and the propagation of the new Acrylic Material around the Windows ecosystem, I thought it would be great to use it in some Web layouts. Acoording to the spec , the composition of an acrylic layer is: So I went to try a CSS-only approach inspired by the layers in that picture, this way: body { margin: 0; font: 1em/1.4 Sans-serif; background: url("https://cdn.pixabay.com/photo/2017/03/27/16/50/beach-2179624_1280.jpg") center center; background-size: 100vw auto; } main { display: flex; align-items: center; justify-content: center; height: 100vh