CSS3 frosted glass effect

If the frosted glass effect is done well, it can make the page look very vivid and three-dimensional. Directly on the picture

body {
    min-height: 100vh;
    box-sizing: border-box;
    margin: 0;
    padding-top: calc(50vh - 6em);
    font: 150%/1.6 serif;
    background: url("iphone.jpg") fixed 0 center;
    background-size: cover;
}
main {
    margin: 0 auto;
    padding: 1em;
    max-width: 30em;
    border-radius: .3em;
    box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
                0 .5em 1em rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
    background: hsla(0,0%,100%,.3);
}

<main>……</main>

Remove those style codes, the core code to achieve the frosted glass effect is as follows:

body {
    …
    background: url("iphone.jpg") fixed 0 center;
    background-size: cover;
}
main {
    …
    background: hsla(0,0%,100%,.3);
}

Of course, this effect is still a little far from our expectations, because the simple 30% transparency will make the text difficult to read. For a page, the background image only serves to beautify it, and the text is the core. You can increase the transparency percentage, but then the page will look rigid. In order to make the text easier to read and keep the page lively, you can blur the background of the mian tag above.

You might try the blur filter, but unfortunately it doesn’t work properly:

main {
    …
    -webkit-filter: blur(3px);
    filter: blur(3px);
}

Using the blur filter will blur the text, making it even harder to see, so I have to give up. The correct way is to add a pseudo-element ::before to the mian tag and use the blur filter on the pseudo-element: (a red background color is added for demonstration purposes)

main {
    position: relative;
    …
}
main::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    -webkit-filter: blur(20px);
    filter: blur(20px);
    background: rgba(255,0,0,.5);
}

It can be seen that the blur effect is achieved, but it causes two problems. First of all, due to the blur, an outer shadow appears. This is easy to solve. Just add overflow: hidden; Secondly, the blur effect will gradually fade within the 20px blur radius around it. If you are concerned about this and want the blur effect to be the same around the edges as in the middle, you can expand the pseudo-element size by 20px. To be on the safe side, you can expand it a little further to 30px:

main {
    …
    overflow: hidden;
}
main::before {
    …
    margin: -30px;
}

Finally, replace the red background color of the pseudo-element with the background image of the body. The effect is as follows. You can also click here and right click to view the complete source code.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.