Bikin Frosted Glass Efek CSS HTML dengan Mudah – Frosted glass effect, 3 hari belakangan ini nyariin beginian kok sulitnya pake banget, bikin efek gimana supaya gambar di belakang itu tetep keliatan tapi blurry, macem sandblast kalo di kaca nako mah.

Bikin Frosted Glass effect CSS HTML dengan Mudah

Ada berbagai cara yang udah dipake, mulai dari pake png yang dibikin blurry terus di repeat, sampe pake jquery segala… dan gak ada yang mantep sekaligus simple.

Walhasil, setelah beberapa hari nyari, ketemu nih yang paling simple banget, buat bikin efek frosted pake CSS aja, dan gak ribet, terlampir ya gais code CSSnya, nextnya kalian tinggal implement aja di element yang mau dikasih efek frosted glass

<style type="text/css">
  .frosted{
    position: absolute;
    margin: auto;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    padding: 40px;
    text-align: center;
  }

  @supports (backdrop-filter: none) {
    .frosted {
      background: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(8px);
    }
  }
</style>

Tinggal di coba untuk kalian moga aja bermanfaat untuk desain web kalian nanti, Selamat mencoba !!!