Penjana CSS backdrop-filter

Bina CSS backdrop-filter langsung dengan menyeret peluncur untuk sembilan fungsi penapis: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, dan sepia. Output mengeluarkan kedua-dua backdrop-filter dan -webkit-backdrop-filter supaya kesannya berfungsi merentas pelayar moden, dan kad kaca dipaparkan di atas latar belakang boleh disesuaikan supaya anda dapat melihat hasil semasa melaraskannya.

1. Pilihan klik pratetap (Frosted Glass, Dark Glass, Vintage, Inverted) untuk bermula daripada rupa yang dikurasi. 2. Seret peluncur dalam panel Kawalan; setiap penapis hanya muncul dalam CSS yang dijana apabila ia berbeza daripada lalainya (cth. brightness/contrast/saturate/opacity lalai kepada 100, blur lalai kepada 0). 3. Edit medan Latar Belakang dengan sebarang nilai CSS latar belakang yang sah (kecerunan, url imej, warna) untuk menguji penapis di atas seni yang berbeza. 4. Klik Salin untuk menyalin kedua-dua deklarasi backdrop-filter dan -webkit-backdrop-filter.

blur 0–50px; brightness 0–200% (lalai 100); contrast 0–200% (lalai 100); grayscale 0–100%; hue-rotate 0–360deg; invert 0–100%; opacity 0–100% (lalai 100); saturate 0–200% (lalai 100); sepia 0–100%. Set Semula memulihkan setiap peluncur ke lalainya. Penapis pada nilai neutral digugurkan daripada output; jika semua neutral output ialah backdrop-filter: none.