Hello.

How to make the block and transparency and blur as in the center of notifications in Windows 10 using CSS?

I already know how to make a blurred background for a block: Filter blur for a block. Blurred for block

But how to make it so that the block was both transparent (by 0.5, let's say), and blurred (no more than 5 pixels), and there was a color as its background? It is most important.

Example

    3 answers 3

    An example is taken from the book "Lea Verou. CSS Secrets: Better Solutions to Everyday Web Design Problems":

    /** * Frosted glass effect */ body { min-height: 100vh; box-sizing: border-box; margin: 0; padding-top: calc(50vh - 6em); font: 150%/1.6 Baskerville, Palatino, serif; } body, main::before { background: url("http://csssecrets.io/images/tiger.jpg") 0 / cover fixed; } main { position: relative; margin: 0 auto; padding: 1em; max-width: 23em; background: hsla(0, 0%, 100%, .25) border-box; overflow: hidden; 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); } main::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: -30px; z-index: -1; -webkit-filter: blur(20px); filter: blur(20px); } blockquote { font-style: italic } blockquote cite { font-style: normal; } 
     <main> <blockquote>“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.” <footer>— <cite>Oscar Wilde, The Picture of Dorian Gray</cite></footer> </blockquote> </main>

    • Thank! This is exactly what you need, what you were looking for !!!! - gmastrbit

    The effect you need will be given by the backdrop-filter property. But, unfortunately, now it is supported only in Safari and iOS Safari (and in Chrome-based browsers under the flag) .

    Nevertheless - with him you will achieve the desired:

     .wrapper { position: relative; } .cover { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); background: rgba(84, 77, 126, 0.75); height: 100%; left: 0; position: absolute; top: 0; width: 300px; } 
     <div class="wrapper"> <img src="https://i.stack.imgur.com/gdln9.png" alt=""> <div class="cover"></div> </div>

    View jsfiddle code .

    enter image description here

      good day

      The fact is that in CSS it is impossible to make blurriness, as it would be possible to see through the "muddy" glass. In the CSF, the blurriness is set to the block that should be blurred.

      In the case of the notification panel, as on your screenshot, this is practically impossible to do. Because in this case, it seems that the panel of notifications gives the blur, but in the CSF only the block should have a blur.

      "But how to make it so that the block is transparent (by 0.5 we assume) and blurry (not more than 5 pixels) and has the color as its background."

      Because the block should be exactly blurry - this is done approximately like this: {filter: blur (2px); background: rgba (174, 0, 255, 0.47); }

      Result: https://scrn.alximicus.com/c5b0SuOrATGFzMfLRaSNgePeU8s.png

      The block will be translucent and blurry.