Generator Kacamorfisme

backdrop-filter: blur() adalah properti CSS di balik tampilan kaca buram — panel tembus pandang yang mengaburkan apa pun yang bergerak di belakangnya, bukan sekadar memudarkan warna datar. Masalahnya adalah kualitas blur hampir tidak mungkin dinilai berdasarkan contoh statis; itu hanya terbaca meyakinkan ketika ada sesuatu yang benar-benar bergerak di bawahnya, seperti yang terjadi pada halaman nyata dengan konten, video, atau pahlawan animasi. Generator ini menempatkan kartu pratinjau di atas latar belakang yang benar-benar dianimasikan, bukan di latar diam, jadi apa yang Anda lihat saat menyeret penggeser adalah apa yang sebenarnya akan dialami pengunjung.

Latar belakangnya adalah animasi CSS sungguhan: gradien linier besar yang dilukis pada 400% ukuran elemen, dengan @keyframes menggeser posisi latar belakangnya bolak-balik dalam satu lingkaran — tanpa loop animasi JavaScript, tanpa kanvas, hanya teknik posisi latar belakang berkelanjutan yang sama yang digunakan di bagian pahlawan produksi. Keburaman, warna rona dan opacity, warna/opacity/lebar highlight batas, radius sudut dan kelembutan bayangan semuanya mendorong gaya langsung kartu mengambang, dan kotak CSS yang dapat disalin mencerminkan nilai yang sama persis.

Tidak semua browser mendukung filter latar belakang, sehingga generator juga mengeluarkan blok @supports not (backdrop-filter: blur(1px)) yang sebenarnya — bukan isyarat token, namun aturan fallback dengan warna latar belakangnya sendiri yang dihitung dari opacity warna Anda yang sebenarnya. Karena tembus cahaya tanpa keburaman terlihat jauh lebih buruk (apa pun yang ada di baliknya terlihat tanpa buram), fallback secara otomatis menaikkan saluran alfa di atas opasitas warna yang Anda pilih, dan komentar di CSS yang dihasilkan menjelaskan dengan tepat mengapa dan seberapa banyak.

Semuanya dihitung dan dirender di browser Anda sendiri: tanpa unggahan, tanpa akun, tanpa bolak-balik server. Salin CSS setelah kartu terlihat benar, letakkan di elemen mana pun yang ingin Anda tempatkan di atas foto, video, atau gradien, dan pertahankan blok @supports sehingga browser lama tetap mendapatkan kartu yang lebih mudah dibaca dan buram daripada kartu yang hampir tidak terlihat.