⭐ 0
🔍
Teks Imej PDF & Dokumen Audio Muzik elektronik Masa Utiliti Pengesah Esoterik Permainan

Penjana Glassmorphism

Laras kad kaca beku — kabur, warna, sorotan sempadan, jejari sudut dan bayang — pratonton terapung di atas latar belakang yang benar-benar animasi supaya kualiti kabur kelihatan dalam gerakan.

🔒 Diproses sepenuhnya dalam penyemak imbas anda — tiada apa yang anda masukkan di sini pernah dimuat naik.

12px
20px
20
40
1px
30px

Kad kaca beku

Kad ini terapung di atas latar belakang yang bergerak berterusan supaya anda boleh menilai kabur dalam gerakan, bukan pada swatch statik.

Memproses... 0%

Keputusan

backdrop-filter: blur() ialah ciri CSS di sebalik rupa kaca beku — panel separa lutsinar yang mengaburkan apa jua yang bergerak di belakangnya dan bukannya sekadar melunturkan warna rata. Tangkapannya ialah kualiti kabur hampir mustahil untuk dinilai dengan swatch statik; ia hanya kelihatan meyakinkan setelah sesuatu benar-benar bergerak di bawahnya, seperti yang akan berlaku pada halaman sebenar dengan kandungan, video atau hero animasi. Penjana ini meletakkan kad pratonton di atas latar belakang yang benar-benar animasi, bukan yang pegun, jadi apa yang anda lihat semasa menyeret peluncur adalah apa yang akan dialami oleh pelawat.

Latar belakang ialah animasi CSS sebenar: linear-gradient besar dilukis pada saiz 400% elemen, dengan @keyframes mengalihkan background-positionnya berulang-alik dalam gelung — tiada gelung animasi JavaScript, tiada kanvas, hanya teknik background-position berterusan yang sama yang digunakan dalam bahagian hero pengeluaran. Kabur, warna dan kelegapan, sorotan sempadan warna/kelegapan/lebar, jejari sudut dan kelembutan bayang semuanya mendorong gaya langsung kad terapung, dan kotak CSS boleh salin mencerminkan nilai yang sama.

Tidak semua pelayar menyokong backdrop-filter, jadi penjana ini juga mengeluarkan blok @supports not (backdrop-filter: blur(1px)) sebenar — bukan sekadar isyarat token, tetapi peraturan fallback dengan warna latar belakangnya sendiri yang dikira daripada kelegapan warna sebenar anda. Oleh kerana lutsinar tanpa kabur kelihatan lebih teruk (apa jua di belakangnya kelihatan tanpa kabur), fallback ini menaikkan saluran alfa secara automatik melebihi kelegapan warna pilihan anda, dan komen dalam CSS yang dijana menerangkan dengan tepat mengapa dan setakat mana.

Semuanya dikira dan dipaparkan dalam pelayar anda sendiri: tiada muat naik, tiada akaun, tiada perjalanan pergi balik pelayan. Salin CSS setelah kad kelihatan sesuai, lepaskan pada mana-mana elemen yang anda mahu duduk di atas foto, video atau kecerunan, dan simpan blok @supports supaya pelayar lama masih mendapat kad yang boleh dibaca dan lebih legap dan bukannya kad yang hampir tidak kelihatan.

Seronok menggunakan alat ini? Rasa produk ini berguna? Nampak potensi di dalamnya dan ingin menyokongnya?

🛡️
Dilaksanakan Dalam Pelayar

Fail dan input anda tidak pernah meninggalkan peranti ini. Pemprosesan berjalan sepenuhnya luar talian. 100% Selamat.

Format & Peraturan Diterima

  • Kawalan kabur, warna/kelegapan, sorotan sempadan warna/kelegapan/lebar, jejari sudut dan kelembutan bayang, semuanya langsung.
  • Latar belakang kecerunan CSS animasi di belakang kad melalui gelung @keyframes background-position sebenar, jadi kabur beku kelihatan dengan gerakan tulen.
  • CSS boleh salin termasuk blok fallback @supports not (backdrop-filter) yang sebenar dengan kelegapan lebih tinggi secara automatik, dikomen dan dijelaskan.

Faedah Utama

✓ Kad pratonton terapung di atas latar belakang kecerunan yang bergerak berterusan, jadi anda menilai kabur seperti yang akan dilihat oleh pelawat — dalam gerakan, bukan pada swatch statik.
✓ Output menghantar fallback @supports not (backdrop-filter) tulen dengan kelegapannya dikira daripada tetapan warna anda sendiri, bukan tekaan tetap.
✓ Setiap kawalan — kabur, warna, sorotan sempadan, jejari, kelembutan bayang — mengemas kini kad langsung dan CSS boleh salin pada setiap seretan.

Kes Penggunaan

  • • Reka bar navigasi atau tindanan modal bergaya frosted-glass dan nilai kualiti kabur berbanding latar belakang bergerak, bukan sekadar petak warna rata.
  • • Laraskan sorotan sempadan yang halus dan kelembutan bayang untuk kad harga, kemudian salin CSS yang sudah menyertakan penyelesaian ganti yang sempurna untuk pelayar lama.
  • • Semak berapa banyak kelegapan warna tint perlu ditingkatkan dalam penyelesaian ganti @supports sebelum melancarkan bahagian utama frosted-glass.