CSS ile Glassmorphism Efekti Oluşturma

Glassmorphism, tasarımların modern ve zarif görünmesine yardımcı olan bir stildir. Tasarımın amacına göre çeşitli sebeplerle kullanılabilir. Başlıkları öne çıkarmak, resim üzerinde kullanılan yazının okunmasını kolaylaştırmak ya da vurgulamak istediğimiz içeriğe odaklanılmasını sağlamak amacıyla kullanılabilir.
Bu yazıda HTML ve CSS kullanarak glassmorphism efektini iki farklı yol kullanarak nasıl oluşturacağımızı ele alacağım.

filter Özelliği Kullanmak

<body> etiketinin içerisine efekti uygulayacağımız bir alan oluşturalım.

<div class="glassbox">
  <h1>Glassmorphism</h1>
  <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
</div>

<body> etiketi için stil ekleyelim.

body {
  background: #f0f1f3;
  background-image: url('background-image.png');
  background-size:cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0 20rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

background-attachment: fixed özelliği ile arka plan resminin boyutu ve konumu, sayfa kaydırıldığında da sabit kalır.
Şimdi glassbox sınıfına sahip div etiketine stil ekleyelim.

.glassbox {
  position: relative;
  z-index: 1;
  width: 100%;
  background: inherit;
  box-shadow: 0px 0px 1rem 0 rgb(0,0,0,0.2);
  border-radius: 10px;
  border: 1px solid rgb(255 255 255 / 15%);
  text-align: center;
}

background: inherit kullanılması önemli bir noktadır. Eğer background-attachment: fixed özelliğini kullanmasaydık arka plan resmi div etiketine göre yeniden boyutlanacaktı. Bu durum glassmorphism efektinin etkisini bozar. Aşağıda verilen görsel oluşturduğumuz yapının background-attachment: fixed uygulanmamış halidir. Bu durumda arka plan resmi, efekti uygulamak istediğimiz kutu içerisinde yeniden boyutlandırılır.

glassmorphism effect with css

background-attachment: fixed özelliğinin uygulanması ve bu özelliğin div tarafından background: inherit kullanılarak alınması ile oluşan görüntü aşağıdadır. Görselde arka plan resmi ile kutu arasında bir devamlılık oluştuğunu görebiliriz. Bu durum glassmorphism efektine daha uygun olacağından background-attachment: fixed niteliği önemli bir noktadır.

glassmorphism effect with css

Şimdi box-shadow niteliğini kullanarak bulanık ve oluşturduğumuz efekt alanını kaplayacak bir sözde eleman oluşturalım. Böylelikle glassmorphism efektini elde elde etmiş olacağız. Ele aldığımız ilk yöntemin arkasında yatan mantık budur.

.glassbox::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: inherit;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0px 0px 1rem 10rem rgb(255,255,255,0.2); 
  filter: blur(10px);
}

Burada da background: inherit özelliğinin kullanıldığına da dikkat edelim. filter:blur(10px) niteliği ile glassmorphism efektini yakalamış oluruz. İçerisinde bulunan değeri isteğimize göre değiştirebiliriz. Ele aldığımız bu yöntem ile elde ettiğimiz sonuç aşağıdaki görseldedir.

glassmorphism effect with css

backdrop-filter Özelliği Kullanmak

backdrop-filter özelliğini kullanarak da aynı görüntüyü elde edebiliriz. backdrop-filter özelliği, bir elementin arka planına filtre efektleri uygulamak için kullanılır. Bu özellik bizi ek olarak bir alan ya da sözde element oluşturmaktan ve fazla CSS kurallarından kurtarır. Nitelik direkt arka plana ve elementin kendisine uygulanır. Ancak backdrop-filter niteliğinin filter niteliğine göre tarayıcı desteği daha düşüktür. Tarayıcı desteğini daha detaylı görmek için Can I use sitesini ziyaret edebilirsiniz. Aşağıda belirtilen stil ile glassmorphism efektini elde edebiliriz.

.glassbox {
  position: relative;
  z-index: 1;
  width: 100%;
  background: rgba( 255, 255, 255, 0.10 );
  box-shadow: 0px 0px 1rem 0 rgb(0,0,0,0.2);
  border-radius: 10px;
  border: 1px solid rgb(255 255 255 / 15%);
  text-align: center;
  backdrop-filter: blur( 10.0px );
 -webkit-backdrop-filter: blur( 10.0px );
}

Aşağıda oluşturduğumuz kodların tamamını bulabilirsiniz.

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      *,
      *:before,
      *:after {
        box-sizing: border-box;
      }
      body {
        background: #f0f1f3;
        background-image: url('abstract-gbe214116b_1280.png');
        background-size:cover;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        margin: 0;
        padding: 0 20rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
      /* backdrop-filter used */
      .glassbox {
         position: relative;
         z-index: 1;
         width: 100%;
         background: rgba( 255, 255, 255, 0.10 );
         box-shadow: 0px 0px 1rem 0 rgb(0,0,0,0.2);
         border-radius: 10px;
         border: 1px solid rgb(255 255 255 / 15%);
         text-align: center;
         backdrop-filter: blur( 10.0px );
         -webkit-backdrop-filter: blur( 10.0px );
       }
       /* filter attribute and pseudo element used */
       .glassbox {
         position: relative;
         z-index: 1;
         width: 100%;
         box-shadow: 0px 0px 1rem 0 rgb(0,0,0,0.2);
         border-radius: 10px;
         border: 1px solid rgb(255 255 255 / 15%);
         text-align: center;
         background: inherit;
       }
      .glassbox::before {
        content: "";
        position: absolute;
        z-index: -1;
        background: inherit;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        box-shadow: inset 0px 0px 1rem 10rem rgb(255,255,255,0.2); 
        filter: blur(10px);
      }
      h1 {
        font-size: 36px;
        line-height: 1.2em;
        color: rgb(238, 146, 26);
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
      }
      h2 {
        font-size: 20px;
        line-height: 1.5em;
        color: rgb(27, 77, 48);
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
        padding: 1rem;
      }
    </style>
  </head>
  <body>
    <div class="glassbox">
      <h1>Glassmorphism</h1>
      <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
    </div>
</body>
</html>