Playing with backdrop-filter


by Jeremy Caudle
code

The other day I saw a nifty tool for web design, Glassmorphism CSS Generator (glassmorphism.com), via a tweet from Andy Clarke. It introduced me to the backdrop-filter property, so I thought I would take the time to use it and learn about it. I had to enable flags withing Firefox to get it to work, but it's pretty handy.

BIRD

View the code:

HTML and JS 
<section class="code-block">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div>BIRD</div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </section>
CSS 
.code-block {
                max-width: 20rem;
                min-height: 20rem;
                background-color: #fff;
                margin: 3rem auto;
                background-image: url(https://jeremycaudle.com/ast/img/lilbird_square.jpg);
                background-size: cover;
                aspect-ratio: 1/1;
                transition: transform 1s ease-out, background-position 1s ease-out;
            }

            .code-block div {
                width: 100%;
                height: 100%;
                background-color: rgb(255, 255, 255);
                opacity: .5;
                transition: backdrop-filter 1s ease-out-in, -webkit-backdrop-filter 1s ease-out-in, opacity 1s ease-out-in;
            }

            .code-block div:nth-of-type(even) {
                opacity: .4;
                backdrop-filter: blur(19px);
                -webkit-backdrop-filter: blur(19px);
            }

            .code-block div:nth-of-type(odd) {
                opacity: .6;
                backdrop-filter: blur(9px);
                -webkit-backdrop-filter: blur(9px);
            }

            @supports (display:grid) {
                .code-block {
                    display: grid;
                    grid-template-columns: repeat(3,1fr);
                    grid-template-rows: repeat(3,1fr);
                    gap: 0;
                }

                .code-block div:nth-of-type(5) {
                opacity: .6;
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(20px);
                font-weight: 900;
                background-clip: text;
                color: transparent;
                display: grid;
                place-items: center;
                font-size: 2rem;
            }

            }


            .code-block div:hover, .code-block div:active, .code-block div:focus {
                backdrop-filter: blur(0);
                -webkit-backdrop-filter: blur(0);
                opacity: 0;
                color: white;
            }

Tags