Tips Membuat Background Blur Transparan dengan CSS

Pada tutorial kali ini kita akan belajar mengenai cara membuat efek background blur transparan dengan css.

biasanya efek blur ini digunakan untuk membuat sebuah tampilan elemen pada sebuah website agar terlihat lebih menarik dilihat, namun hal tersebut tergantung dengan gaya desain yang anda bangun.

Yuks, tanpa berlama lama lagi mari kita simak caranya berikut ini.

Baca juga :

Ini Dia Cara Membuat Background Color Transparan Dengan CSS

Efek Background Blur dengan CSS

Kita akan menggunakan fungsi Filter pada css untuk membuat efek blur ini, berikut contoh sintak efek blur :

Contoh Struktur HTML :

<div class="bg-box"></div>

Style CSS :

.bg-box {
  /* Warna background hitam tipis */
  background-color: rgba(0,0,0,0.4);

  /* Tambah efek blur pada background */
  backdrop-filter: blur(5px);

  width: 100%;
  height : 500px;
}

Sintak backdrop-filter: blur(5px); akan memberikan efek blur pada background elemen kita, nilai 5px adalah tingkat keburaman yang kita berikan, semakin tinggi nilainya maka semakin buram objek yang ada dibelakangnya. kamu bisa mencoba menaikkan atau menurunkan nilai tersebut sesuai kebutuhanmu.

Preview Hasil :

Demikian cara membuat efek background blur transparant dengan css, semoga artikel sederhana ini dapat membantu anda.