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; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter