CSS: Blurry Glass Effect

body { background: url(https://images.unsplash.com/photo-1544306094-e2dcf9479da3) no-repeat; /* Keep the inherited background full size. */ background-attachment: fixed; background-size: cover; display: grid; align-items: center; justify-content: center; height: 100vh; } .container { width: 30rem; height: 20rem; box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); border-radius: 5px; position: relative; z-index: 1; background: inherit; overflow: hidden; } .container:before { content: ""; position: absolute; background: inherit; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5); filter: blur(10px); margin: -20px; }
Just get body with an image backgrund and set a div.container

You will see the blurry glass magic.

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.