Efek blur pada background menjadi salah satu elemen desain yang banyak digunakan pada website modern. Selain memberikan kesan elegan dan profesional, efek ini juga membantu pengguna lebih fokus pada konten utama yang ditampilkan.
Dengan memanfaatkan properti backdrop-filter di CSS, Anda dapat membuat tampilan transparan dengan efek blur yang sering dikenal sebagai gaya desain glassmorphism.
Menyiapkan Struktur HTML
Langkah pertama adalah membuat struktur HTML sederhana sebagai wadah konten yang akan ditempatkan di atas background blur.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Blur Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="blur-background">
<h1>Selamat Datang di Website Kami</h1>
<p>Ini adalah contoh teks yang berada di atas background blur.</p>
</div>
</body>
</html>
Menambahkan CSS untuk Efek Blur
Setelah struktur HTML selesai dibuat, tambahkan kode CSS berikut untuk menghasilkan efek blur pada background.
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.blur-background {
position: relative;
width: 80%;
max-width: 600px;
padding: 20px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
text-align: center;
}
.blur-background h1,
.blur-background p {
margin: 0;
color: #333;
}
Memahami Fungsi Kode CSS
Beberapa properti penting yang digunakan pada efek blur antara lain:
1. Background Transparan
background-color: rgba(255, 255, 255, 0.5);
Kode tersebut memberikan warna putih dengan tingkat transparansi 50 persen sehingga efek blur dapat terlihat.
2. Efek Blur
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
Properti ini berfungsi memberikan efek kabur pada area di belakang elemen.
3. Border Radius
border-radius: 15px;
Digunakan untuk membuat sudut elemen menjadi lebih halus dan modern.
4. Shadow
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
Memberikan bayangan ringan sehingga elemen terlihat lebih menonjol.
Mengatur Tingkat Blur
Anda dapat menyesuaikan kekuatan efek blur sesuai kebutuhan.
Efek blur ringan:
backdrop-filter: blur(5px);
Efek blur sedang:
backdrop-filter: blur(10px);
Efek blur kuat:
backdrop-filter: blur(20px);
Semakin besar nilai pixel yang digunakan, semakin kuat efek blur yang dihasilkan.
Dukungan Browser
Properti backdrop-filter saat ini telah didukung oleh sebagian besar browser modern seperti Google Chrome, Microsoft Edge, Safari, dan Firefox versi terbaru.
Meski demikian, pengujian pada berbagai browser tetap disarankan untuk memastikan tampilan website berjalan optimal pada semua perangkat pengguna.
Kesimpulan
Efek background blur dapat meningkatkan kualitas visual sebuah website dengan cara yang sederhana. Melalui kombinasi transparansi dan properti backdrop-filter, Anda bisa menghadirkan desain modern bergaya glassmorphism tanpa perlu menggunakan JavaScript atau library tambahan.
Dengan sedikit penyesuaian warna, transparansi, dan tingkat blur, efek ini dapat diterapkan pada card, modal, navbar, hingga berbagai elemen antarmuka lainnya untuk menciptakan pengalaman pengguna yang lebih menarik.
