How can CSS achieve ground glass effect?

Discussion in 'HTML & Website Design' started by Andrea365, Sep 23, 2021.

0
  1. #1
    I saw the frosted glass effect of a suspended menu on Apple's official website. I was attracted by this effect. Who knows how to implement it?
     
    Andrea365, Sep 23, 2021 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,806
    Likes Received:
    4,534
    Best Answers:
    123
    Trophy Points:
    665
    #2
    Have you got a screenshot?
    This is what their homepage looks like for me

    upload_2021-9-24_15-10-45.png
     
    sarahk, Sep 23, 2021 IP
  3. shalom_m

    shalom_m Member

    Messages:
    49
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    33
    #3
    The CSS below should do it:

    .glass{

    width: 500px;

    height: 200px;

    background: inherit;

    position: absolute;

    overflow: hidden;

    top: 50%;

    left: 50%;

    margin-left: -250px;

    margin-top: -100px;

    border-radius: 6px;    ​

    }


    .glass:before{

    width: 550px;

    height: 250px;

    content: "";

    position: absolute;

    top: -25px;

    left: -25px;

    bottom: 0;

    right: 0;

    background: inherit;

    box-shadow: inset 0 0 0 180px rgba(255,255,255,0.2);

    filter: blur(10px);    ​

    }    ​
     
    shalom_m, Nov 19, 2021 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,278
    Likes Received:
    1,696
    Best Answers:
    31
    Trophy Points:
    475
    #4
    So, how does it work? I tried jsfiddle but I can't seem to make it working:

    https://jsfiddle.net/3e46japg/

     
    qwikad.com, Nov 20, 2021 IP
  5. shalom_m

    shalom_m Member

    Messages:
    49
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    33
    #5
    Sorry, I was a bit too fast in uploading (did not check final result).
    Here is the full and doublecheked version:

    <head>
    <style>
    body {
    background: url("https://images.ctfassets.net/hrltx12pl8hq/3MbF54EhWUhsXunc5Keueb/60774fbbff86e6bf6776f1e17a8016b4/04-nature_721703848.jpg") no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100vh;
    }

    .glass {
    width: 500px;
    height: 200px;
    background: inherit;
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -100px;
    border-radius: 6px;
    z-index: 1;
    box-shadow: 0 0 200px 0 rgba(0, 0, 0, .2);
    }

    .glass:before {
    width: 550px;
    height: 250px;
    content: "";
    position: absolute;
    top: -25px;
    left: -25px;
    bottom: 0;
    right: 0;
    background: inherit;
    box-shadow: inset 0 0 0 180px rgba(255,255,255,0.2);
    filter: blur(10px);
    z-index: -1;
    }
    </style>
    </head>

    <body>

    <div class="glass"></div>

    </body>    ​
     
    shalom_m, Nov 20, 2021 IP
    qwikad.com likes this.
  6. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,278
    Likes Received:
    1,696
    Best Answers:
    31
    Trophy Points:
    475
    #6
    Beautiful, thank you: https://jsfiddle.net/xtd10h6s/

     
    qwikad.com, Nov 20, 2021 IP