1 I'm trying to create a frosted glass effect on a non-rectangular element but it's not working out. I'm experiencing an odd issue that I can't seem to wrap my head around... The frosted glass effect is easy to accomplish by setting a fixed background-image on the document body, adding a partially transparent background color to the element and creating a ::before pseudo element with the same fixed background-image and applying a blur filter. Like so: body background: url(bg-lanterns.jpg) 0 / cover fixed; main position: relative; margin: 1rem auto; padding: 1rem; height: 600px; width: 800px; background: rgba(255,255,255,0.7); main::before content: ''; z-index: -1; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(bg-lanterns.jpg) 0 / cover fixed; filter: blur(10px); Creating a non-rectangular element is also easy by using clip-path like this: main position: relative; margin: 1rem auto; padding: 1re...