Lewati ke konten
Toolars
Jelajahi
Laporkan bug

Desain · utilitas Lokal

Generator Glassmorphism CSS

CSS Glassmorphism Generator

Bangun panel kaca buram dengan opasitas, blur, saturasi, tepi, dan radius yang dapat disetel, lalu salin CSS backdrop-filter lengkap dengan bentuk -webkit-.

Jalur tugas / dari masukan ke hasil

Pilih rona kaca

Berjalan lokal · Tidak ada yang diunggah

Cara kerja Generator Glassmorphism CSS, privasi, dan alat terkait

Jalur tugas / dari masukan ke hasil

Cara membangun panel glassmorphism

  1. 01

    Pilih rona kaca

    Pilih warna Rona kaca. Pratinjau mengapungkan panel di atas dua orb berwarna, sehingga material dinilai dengan latar yang ramai seperti pada layar nyata.

  2. 02

    Atur opasitas dan blur

    Opasitas permukaan berjalan dari 0,05 hingga 0,8 — lebih rendah berarti lebih transparan — dan Pengaburan latar belakang dari 0 hingga 40 px melembutkan apa pun yang berada di belakang panel.

  3. 03

    Sesuaikan saturasi, tepi, dan radius

    Saturasi (50–200%) memperkaya atau meredam latar, Opasitas tepi (0–0,8) menelusuri pinggiran dengan warna rona, dan Radius sudut (0–48 px) membulatkan panel.

  4. 04

    Seimbangkan materialnya

    Kontrol permukaan saling mengimbangi: opasitas rendah butuh lebih banyak blur agar terbaca sebagai kaca, dan Saturasi di atas 100% menjaga latar yang ramai tidak luntur di balik rona pucat. Material bawaan — rona putih dengan opasitas 0,22, blur 18 px, saturasi 140% — adalah titik tengah yang terbukti.

  5. 05

    Salin CSS panel

    Tekan Salin CSS atau Unduh .css untuk menyimpan toolars-glass-panel.css. Aturan .glass-panel memadukan latar rgba, backdrop-filter dengan kembaran -webkit-, tepi rona 1 px, dan bayangan lembut.

  6. 06

    Rencanakan degradasinya

    Jika backdrop-filter tidak tersedia, latar rgba, border, dan bayangan tetap terlihat. Mengatur Blur latar ke nol hanya perkiraan fallback karena filter saturasi mungkin masih berlaku. Uji CSS di browser tujuan dan naikkan Opasitas permukaan bila teks membutuhkan kontras lebih tinggi.

Fakta alat

Pemrosesan
Di browser Anda
Input meninggalkan perangkat
Tidak pernah
Retensi
Tidak ada yang disimpan
Harga
Gratis

Masukan Anda tetap di peramban.

Generator Glassmorphism CSS menggunakan jalur eksekusi lokal terverifikasinya dan tidak membuat riwayat masukan atau keluaran tersembunyi.

Eksekusi lokal

Berjalan di dalam tab peramban saat ini.

Tanpa pemrosesan tersembunyi

Data alat aktif tidak pernah menjadi catatan dokumen Toolars.

Tanpa perlu akun

Gunakan alur kerja inti tanpa membuat profil. Favorit disinkronkan ke akun Anda setelah masuk.

Atur ulang seketika

Bersihkan tab dan data kerja aktif pun hilang.

Apa yang sebenarnya dilakukan Generator Glassmorphism CSS

Bilah kendali mengambang pemutar musik, kartu notifikasi yang melayang di atas peta, panel login yang tergantung di depan dinding foto — kaca buram menjual kedalaman tanpa menyembunyikan halaman. Efeknya sepenuhnya bergantung pada apa yang ada di belakangnya, itulah mengapa pratinjau ini merender bentuk berwarna untuk dikerjakan blur, dan seluruh eksplorasi terjadi secara lokal sehingga palet antarmuka yang belum dirilis tidak pernah meninggalkan perangkat. Begitu materialnya seimbang, aturan yang diekspor membawa setiap keputusan bersamanya.

Pertanyaan umum

CSS apa yang dihasilkan ekspor ini?
Satu aturan .glass-panel: latar rgba dari rona dan opasitas Anda, backdrop-filter: blur() saturate() dalam bentuk standar maupun -webkit-, tepi 1 px dalam rona pada opasitas tepi Anda, radius sudut Anda, dan bayangan jatuh lembut yang tetap.
Apakah glassmorphism bekerja di setiap browser?
Dukungan dan hasil backdrop-filter berbeda menurut browser serta versinya. Ekspor memuat deklarasi standar dan -webkit-, tetapi tidak melakukan deteksi saat berjalan. Tanpa filter, latar tembus pandang, border, dan bayangan tetap ada; periksa kontras teks di atas latar sebenarnya.
Mengapa pratinjau membutuhkan orb berwarna itu?
backdrop-filter memproses apa pun yang berada di belakang elemen, jadi kaca di atas latar kosong tidak menampilkan apa-apa. Orb memberi blur dan saturasi sesuatu yang nyata untuk dikerjakan — alasan yang sama efek kaca membutuhkan latar yang ramai di produksi.
Apa yang tetap dalam aturan yang diekspor?
Tiga hal: lebar tepi selalu 1 px, warna tepi selalu rona Anda pada Opasitas tepi yang dipilih, dan bayangan jatuhnya berupa sebaran lembut yang tetap. Semua yang lain — latar, blur, saturasi, radius — langsung mengikuti kontrol Anda.
Seberapa opak sebaiknya kacanya?
Tetaplah di paruh bawah rentang untuk panel yang mengambang di atas konten — bawaan 0,22 menjaga latar tetap terbaca melalui materialnya. Naikkan hanya saat panel membawa teks yang harus bertahan di atas latar yang ramai, dan periksa kontras pada ukuran font Anda yang sebenarnya.
Apakah pengaturan saya diunggah?
Tidak. Panel dihitung dan dipratinjau sepenuhnya di tab ini tanpa akun, dan tidak ada yang disimpan, dicatat, atau dikirim. Tekan Atur ulang untuk mengembalikan material bawaan.

Lanjutkan di Desain

Tugas terkait, bukan jalan buntu.

Pindah ke ruang kerja terfokus lainnya tanpa kembali ke indeks lengkap.

Generator Loader CSS

CSS Loader Generator

Rancang loader CSS cincin orbit atau tiga titik dengan ukuran, durasi, dan warna yang dapat disetel, lalu salin kode lengkap dengan blok prefers-reduced-motion.

Buat

Generator Checkbox CSS

CSS Checkbox Generator

Beri gaya kotak centang HTML asli dengan ukuran, border, dan warna pilihan, lalu salin CSS yang mempertahankan fokus keyboard dan status disabled.

Buat

Generator Switch CSS

CSS Switch Generator

Rancang sakelar alih murni CSS dengan geometri lintasan dan kenop yang dapat diukur, lalu salin kodenya dengan dukungan reduced-motion — tanpa JavaScript.

Buat

Generator Clip Path CSS

CSS Clip Path Generator

Edit titik poligon dengan menyeret, papan ketik, atau koordinat. Mulai dari empat prasetel dan salin deklarasi clip-path atau CSS lengkap secara lokal.

Buat