Desain

Pembuat Glassmorphism

Buat CSS kaca buram dengan blur, transparansi, rona, dan pratinjau langsung Berjalan di perangkat Anda — tidak ada yang diunggah, tidak ada yang disimpan.

Blur12px

Transparansi20%

Saturasi120%

Radius Border16px

Lebar Border1px

Opasitas Border40%

Warna Rona

#ffffff

Latar Belakang

Pratinjau

Glassmorphism

Keluaran CSS

/* Glassmorphism */
background: rgba(255, 255, 255, 0.20);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.18);
-webkit-backdrop-filter: blur(12px) saturate(120%);
backdrop-filter: blur(12px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.40);

/* Fallback for browsers without backdrop-filter support */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  background: rgba(255, 255, 255, 0.60);
}

Terkait

Pembuat clip-path CSSDesain Editor Easing Cubic-BezierDesain Pembuat Blob SVGDesain

Tentang Pembuat Glassmorphism

Buat CSS kaca buram dengan blur, transparansi, rona, dan pratinjau langsung

Pembuat Glassmorphism adalah alat gratis di kategori Desain & Visual pada BrowseryTools. Alat ini berjalan sepenuhnya di browser Anda: apa yang Anda berikan diproses di perangkat Anda sendiri dan tidak pernah diunggah ke server, tanpa pendaftaran, tanpa iklan, dan tanpa tanda air, serta tetap berfungsi tanpa koneksi setelah halaman selesai dimuat.