I saw the frosted glass effect of a suspended menu on Apple's official website. I was attracted by this effect. Who knows how to implement it?
The CSS below should do it: .glass{ width: 500px; height: 200px; background: inherit; position: absolute; overflow: hidden; top: 50%; left: 50%; margin-left: -250px; margin-top: -100px; border-radius: 6px; } .glass:before{ width: 550px; height: 250px; content: ""; position: absolute; top: -25px; left: -25px; bottom: 0; right: 0; background: inherit; box-shadow: inset 0 0 0 180px rgba(255,255,255,0.2); filter: blur(10px); }
So, how does it work? I tried jsfiddle but I can't seem to make it working: https://jsfiddle.net/3e46japg/
Sorry, I was a bit too fast in uploading (did not check final result). Here is the full and doublecheked version: <head> <style> body { background: url("https://images.ctfassets.net/hrltx12pl8hq/3MbF54EhWUhsXunc5Keueb/60774fbbff86e6bf6776f1e17a8016b4/04-nature_721703848.jpg") no-repeat; background-attachment: fixed; background-size: cover; height: 100vh; } .glass { width: 500px; height: 200px; background: inherit; position: absolute; overflow: hidden; top: 50%; left: 50%; margin-left: -250px; margin-top: -100px; border-radius: 6px; z-index: 1; box-shadow: 0 0 200px 0 rgba(0, 0, 0, .2); } .glass:before { width: 550px; height: 250px; content: ""; position: absolute; top: -25px; left: -25px; bottom: 0; right: 0; background: inherit; box-shadow: inset 0 0 0 180px rgba(255,255,255,0.2); filter: blur(10px); z-index: -1; } </style> </head> <body> <div class="glass"></div> </body>