Generator Glassmorphism
Atur kartu bergaya kaca buram—blur, warna, sorotan tepi, radius sudut dan bayangan—dengan pratinjau melayang di atas latar yang benar-benar bergerak sehingga kualitas blur terlihat dalam gerakan.
🔒 Diproses sepenuhnya di browser Anda — apa pun yang Anda masukkan di sini tidak akan pernah diunggah.
Hasil
`backdrop-filter: blur()` adalah properti CSS di balik tampilan kaca buram—panel tembus pandang yang memburamkan apa pun yang bergerak di belakangnya, bukan sekadar memudarkan warna datar. Masalahnya, kualitas blur hampir mustahil dinilai dengan contoh warna statis; blur hanya terlihat meyakinkan ketika ada sesuatu yang benar-benar bergerak di bawahnya, seperti yang akan terjadi di halaman nyata dengan konten, video, atau hero yang dianimasikan. Generator ini menempatkan kartu pratinjau di atas latar yang benar-benar bergerak, bukan diam, jadi yang Anda lihat saat menggeser slider adalah yang akan dialami pengunjung sebenarnya.
Latarnya adalah animasi CSS asli: `linear-gradient` besar yang dilukis pada ukuran elemen 400%, dengan `@keyframes` yang menggeser `background-position` bolak-balik dalam loop—tanpa loop animasi JavaScript, tanpa canvas, hanya teknik `background-position` kontinu yang sama seperti yang digunakan di bagian hero produksi. Blur, warna dan opasitas, sorotan tepi warna/opasitas/lebar, radius sudut, dan kelembutan bayangan semuanya mendorong gaya langsung kartu melayang, dan kotak CSS siap salin mencerminkan nilai yang persis sama.
Tidak semua browser mendukung `backdrop-filter`, jadi generator juga menghasilkan blok `@supports not (backdrop-filter: blur(1px))` asli—bukan sekadar isyarat, melainkan aturan fallback dengan warna latar sendiri yang dihitung dari opasitas warna Anda yang sebenarnya. Karena tembus pandang tanpa blur terlihat jauh lebih buruk (apa pun di belakangnya terlihat tidak buram), fallback secara otomatis menaikkan kanal alfa di atas opasitas warna pilihan Anda, dan sebuah komentar di CSS yang dihasilkan menjelaskan alasannya dan seberapa besar kenaikannya.
Semua komputasi dan rendering berjalan di browser Anda sendiri: tanpa unggahan, tanpa akun, tanpa bolak-balik server. Salin CSS setelah kartu terlihat sesuai, letakkan di elemen apa pun yang ingin Anda tempatkan di atas foto, video, atau gradasi, dan simpan blok `@supports` agar browser lama tetap mendapatkan kartu yang terbaca dan lebih buram, bukannya yang nyaris tak terlihat.