Lompat ke alat
JoeLucky

Klik ★ pada alat untuk menyimpannya

Kategori Alat

Kode ke GambarPembuat Gradien CSSGlassmorphism CSSPembuat Box ShadowPembuat Loader CSSPembuat Blob SVGSVG ke PNGPemeriksa Kontras WarnaPengubah PX / REM / EM
JoeLucky

Alat online praktis, semua di satu tempat

Kebijakan PrivasiKetentuan Layanan

© 2026 JoeLucky®. Hak cipta dilindungi.

  1. JoeLucky
  2. /CSS & Desain
  3. /Glassmorphism CSS

Glassmorphism CSS

Buat kode blur latar belakang dan batas tembus pandang secara langsung.

Pengaturan Efek

#FFFFFF
Opasitas Latar15%
Blur Latar10px
Saturasi180%
Opasitas Garis Tepi30%
Radius Sudut16px
Opasitas Bayangan10%
Latar Pratinjau
Pratinjau Langsung
CSS
background: rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);

💡 Tips

  • Hasil terbaik: opasitas 10–25%, blur 5–15px
  • Prefiks -webkit-backdrop-filter disertakan demi kompatibilitas Safari
  • Jika efeknya terlihat kusam, pastikan induknya memiliki latar yang berwarna
  • Saturasi 180% menjaga warna di balik kaca tetap cerah

CSS & DESAIN SERUPA

Lihat semua
Kode ke Gambar

Ubah potongan kode menjadi tangkapan layar yang menarik.

Buka →
Pembuat Gradien CSS

Rancang gradien linear, radial, dan conic secara visual lalu salin CSS-nya.

Buka →
Pembuat Box Shadow

Buat bayangan halus berlapis dengan pratinjau interaktif.

💬 Komentar

?

Belum ada komentar. Jadilah yang pertama!

APA ITU Glassmorphism CSS?

Atur opasitas, blur, saturasi, dan border untuk pratinjau kartu kaca buram secara real time, lalu salin CSS-nya, termasuk backdrop-filter.

Cara memakai

  1. Panel kiri memiliki 7 kontrol: opasitas, blur, saturasi, opasitas border, radius border, bayangan, dan pemilih warna — semuanya memperbarui kartu pratinjau seketika.
  2. Hasil terbaik: opasitas 10–25% dan blur 5–15px. Kedua parameter ini paling berpengaruh pada tampilan kaca buram.
  3. Naikkan saturasi ke 180% untuk warna cerah di balik kaca; opasitas border menambah tepi sorot halus pada kartu.
  4. Klik 6 swatch latar (Ungu, Samudra, Senja, dll.) untuk menguji efek kaca di atas berbagai gradien.
  5. Klik “Salin CSS” untuk kode siap produksi yang menyertakan backdrop-filter dan -webkit-backdrop-filter (kompatibel Safari).

Pertanyaan yang sering diajukan

Bagaimana efek glassmorphism dicapai?

Dengan backdrop-filter: blur() untuk mengaburkan latar, background-color semi-transparan, dan garis tepi halus.

Apakah didukung di semua browser?

Didukung baik di Chrome, Edge, dan Safari. Firefox memerlukan flag eksperimental. Tambahkan awalan -webkit- agar aman.

Bisakah saya melihat pratinjau secara real time?

Bisa. Setiap penyesuaian penggeser atau warna memperbarui pratinjau seketika.

Buka →