Generator CSS untuk Efek Kaca Resolusi Tinggi

 (glass3d.dev)
5 poin oleh GN⁺ 2025-07-04 | 1 komentar | Bagikan ke WhatsApp
  • Menyediakan cara mengimplementasikan efek kaca resolusi tinggi dengan kode CSS
  • Menerapkan filter visual seperti blur, kecerahan (brightness), saturasi (saturate) serta bayangan bertingkat
  • Menggunakan pseudo-element untuk mewujudkan efek layer depan dan belakang serta tekstur
  • Dapat diterapkan dan dikustomisasi pada berbagai UI hanya dengan satu kelas CSS yang ringkas
  • Cocok untuk menghadirkan efek kaca resolusi tinggi ke proyek web secara cepat dan modern

Pengantar

Kode CSS ini dioptimalkan untuk membuat efek kaca resolusi tinggi pada UI web. Dibandingkan efek glassmorphism konvensional, pendekatan ini memungkinkan tampilan yang lebih detail dan memiliki kedalaman, serta hasilnya dapat dilihat secara intuitif hanya dengan menerapkan satu kelas CSS.

Poin utama

  • Kelas .glass3d menerapkan berbagai efek filter visual seperti blur (32px), kecerahan (0.85), saturasi (2.5), serta penambahan warna dan tekstur noise
  • Susunan box-shadow bertingkat menghasilkan kesan kaca tiga dimensi yang realistis
  • Pada pseudo-element ::before, backdrop-filter, warna, dan gambar latar noise ditumpuk untuk menghasilkan transparansi latar serta tekstur yang berdimensi
  • Pada pseudo-element ::after, ditambahkan bayangan internal (inset) untuk memberi efek seperti pantulan cahaya pada permukaan kaca asli
  • Dengan pemisahan z-index, strukturnya diatur agar efek setiap layer tidak saling bertabrakan dan tetap tampil dengan benar
  • Melalui selector .glass3d > *, bagian konten dari elemen anak dipastikan selalu muncul paling atas

Latar penggunaan dan keunggulan

  • Tanpa library atau dependensi eksternal, UI dengan efek kaca yang modern dan mengikuti tren dapat diwujudkan hanya dengan satu kelas CSS
  • Sangat berguna bagi developer frontend web karena mudah diterapkan dan diperluas ke sistem desain UI, kartu, pop-up, tombol, dan lainnya
  • Dengan memanfaatkan texture dari gambar pola nyata, kombinasi warna yang beragam, dan efek bayangan multi-tahap, pendekatan ini unggul dalam menghadirkan kedalaman serta permainan terang-gelap dibanding teknik glassmorphism yang ada

Bacaan terkait

1 komentar

 
GN⁺ 2025-07-04
Komentar Hacker News

  • Saya membuat versi yang menerapkan efek refraksi nyata ke elemen halaman dengan JavaScript, jadi layak untuk dicoba: https://real-glass.vercel.app/

  • Efek ini punya keterbatasan karena hanya memburamkan piksel yang tepat berada di belakang permukaan; saya merekomendasikan artikel Josh Comeau yang menjelaskan fenomena ini dengan baik (https://www.joshwcomeau.com/css/backdrop-filter/#the-issue) serta diskusi Hacker News (https://news.ycombinator.com/item?id=42302907). Ini isu yang cukup penting jika latarnya bergerak, tetapi biasanya tidak terlalu penting jika latarnya statis.

    • Saya membaca artikel Josh yang keren dan mencoba mengikuti tutorialnya untuk membuat implementasinya, tetapi saya menemui masalah saat menangani border-radius dengan mask SVG. Ini bekerja baik pada elemen yang di-hardcode, tetapi saya masih memikirkan cara untuk memakainya di seluruh library komponen tempat border-radius berubah sesuai brand/container query.
    • Solusi Josh juga terasa secara intuitif seperti ada yang keliru; itu mengasumsikan elemen di sekitarnya adalah material yang memancarkan cahaya, dan saya tidak menganggap itu sebagai sifat fisik dasar dari "material" di web. Secara default, saya menganggap material lebih mirip kertas.

  • Menurut saya implementasinya cukup keren, tetapi tanpa efek refraksi kaca, pemisahan visual antar layer yang kuat pada Liquid Glass jadi hilang. Jika melihat resource desain Material, mereka menekankan bahwa aplikasi seharusnya terdiri dari layer 3D yang bergerak secara konsisten. Namun saat itu benar-benar diimplementasikan dalam 2D dan semua elemen bercampur, membedakan setiap layer menjadi sangat sulit. Orang sering tidak menemukan tombol aksi di sudut-sudut. Motion memang membantu membedakan chrome dan konten, tetapi secara visual tidak terlalu menonjol. Menurut saya keunggulan terbesar Liquid Glass adalah edge distortion. Itu menciptakan gerakan nonlinier yang langsung tertangkap oleh penglihatan manusia saat konten bergerak, sehingga pemisahan layer menjadi lebih jelas ketika ada gerakan. Elemen refraksi penting ini tidak ada di sini. Mewujudkan edge distortion dengan filter SVG tidak mudah, dan pada akhirnya merupakan pekerjaan yang cukup kompleks. Jika melihat penjelasan bertahap di https://atlaspuplabs.com/blog/liquid-glass-but-in-css/…, kompleksitasnya akan terasa. Saya juga menemukan koleksi CodePen Spark yang mengumpulkan berbagai upaya implementasi Liquid Glass, dan saya juga merekomendasikan referensi yang dibuat cukup baik dengan SVG yang di-hardcode: https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

    • Saya rasa Apple membuat moat yang cerdas lewat Liquid Glass. Siapa pun bisa dengan mudah membuat versi murahnya, tetapi membuatnya benar-benar tampak asli itu sangat sulit. Kita melihat kaca asli setiap hari, jadi kita bisa secara intuitif membedakan "asli vs palsu". Karena itu, produk tiruan akan terlihat jelas, dan Apple bisa menjaga "kesan premium".
    • Saya benar-benar suka edge distortion pada Liquid Glass, jadi suatu saat saya pasti ingin membuatnya lagi. Proyek yang sedang saya kerjakan saat ini berfokus pada pemolesan detail, memperhatikan kompatibilitas browser, dan implementasi material tanpa memakai 3D sungguhan. Saya juga setuju bahwa efeknya lebih menonjol saat layer bergerak di atas latar yang tetap. Situs demo yang sedang saya kembangkan memiliki efek seperti itu, meski belum selesai. Terima kasih atas referensi yang bagus.
    • Saya setuju bahwa efek refraksi kaca menciptakan rasa pemisahan visual berbasis layer. Tapi menurut saya efek refraksi terlalu mengganggu dan di beberapa lingkungan terlihat buruk. Itu memang fenomena fisik kaca asli, tetapi tidak berarti wajib ada. Rasanya seperti memperbesar elemen dari skeuomorphism yang paling tidak saya sukai. Sebagai catatan, saya lebih menyukai desain sebelum iOS 7.

  • Efeknya sendiri keren, tetapi saya tidak terlalu merasa itu benar-benar seperti kaca. Perbedaan yang langsung terasa adalah cahaya sama sekali tidak bereaksi pada bevel. Saya juga mengharapkan cahaya dipantulkan oleh kaca sehingga memengaruhi pencahayaan/warna. Sulit mencapai itu hanya dengan efek blur. Kaca juga bisa menghasilkan bayangan yang khas, terutama caustics, tetapi tampaknya Apple pun belum terlalu memperhatikan bagian ini. Bayangan saat ini terlihat seperti drop shadow sederhana, jadi yang ditekankan lebih terasa seperti kartu datar daripada objek 3D. Ini melenceng dari inti tren terbaru. Efek seperti ini sulit diwujudkan hanya dengan CSS, dan sepertinya lebih cocok dijalankan sebagai shader di GPU.

    • Saya penasaran apa metodenya jika tidak bisa dilakukan dengan CSS. Saya juga ragu apakah efek shader GPU bisa diterapkan ke div biasa. Jika efek GPU tidak bisa langsung dimasukkan ke HTML dasar, mungkin pada akhirnya lebih baik membuat rendering engine baru dengan semacam canvas kustom. HTML sekarang seakan tidak punya arti lagi selain menyampaikan teks dengan tag <p>, dan sisanya dipakai untuk iklan, jadi mungkin lebih baik menyisakan <p> saja lalu memulai ulang sepenuhnya dengan integrasi GPU yang lebih baik.

  • Saya sedang mengumpulkan sampel desain seperti ini: https://github.com/swyxio/spark-joy
    Saya juga merekomendasikan beberapa bahan terkait:

    • https://ui.glass/generator/ : generator CSS gratis bergaya glassmorphism
    • frosted glass sticky header https://www.joshwcomeau.com/css/backdrop-filter/
    • contoh pen glassmorphism codepen, in context
    • contoh CSS efek blur+rotasi 
      .blur-and-rotate {
 border-radius: 20px;
 backdrop-filter: blur(20px) hue-rotate(120deg);
 -webkit-backdrop-filter: hue-rotate(120deg);
}
    • Terima kasih sudah menambahkan proyek ini ke daftar spark-joy.
    • Menurut saya Spark Joy adalah resource yang sangat keren.
    • Saya menemukan ASCII Font generator yang tampaknya belum ada di spark-joy; sebagai gantinya saya merekomendasikan tool yang sering saya pakai: https://patorjk.com/software/taag/…

  • Menurut saya usability-nya akan jauh lebih baik di mobile jika ada opsi untuk menyembunyikan atau melipat box. Box memenuhi seluruh layar sehingga efek di belakangnya tidak terlalu terlihat. Tetap menarik, jadi saya berencana mencobanya lagi di layar yang lebih besar. Menambahkan opsi untuk menyembunyikan box akan sangat membantu.

  • Sepertinya ini memakai teknik yang mirip dengan implementasi glass saya: https://news.ycombinator.com/item?id=42225481 terutama pendekatan yang banyak memanfaatkan box shadow.

    • Proyek Anda benar-benar keren. Senang rasanya mengetahui bahwa bukan cuma saya yang memakai banyak layer bayangan untuk menciptakan kedalaman. Ide menambahkan Light Rays sangat mengesankan.

  • Efek ini bekerja bagus sebagai latar web.

  • Di ponsel saya, scrolling-nya cukup lambat. Saya penasaran apakah ada efek scroll lain yang memang sengaja dibuat lambat, atau ini efek samping dari efek glass.

    • Pengamatan yang menarik. Tidak ada efek scroll apa pun di halaman ini. Akan sangat membantu jika Anda bisa membagikan perangkat, browser, dan kondisi jaringan yang Anda gunakan.
    • Di perangkat M4 saya dengan RAM 128GB, ini berjalan lancar.

  • Saya rasa ini dibuat dengan sangat baik. Saya selalu takjub bahwa computer graphics bukanlah "satu cara khusus", melainkan sebenarnya "5 lapis trik". Saya juga rasa dukungan lintas-browser adalah tantangan besar. Apakah Anda punya gambaran bagian mana yang paling banyak memakan resource? Tebakan saya cuma backdrop-filter.

    • Saya juga tidak menyangka akan butuh banyak trik. Bagian yang paling berat adalah pemrosesan blur dari backdrop-filter. Semakin tinggi nilai blur, semakin banyak informasi piksel di sekitarnya yang harus diperiksa untuk rendering. Hal lain yang menghabiskan resource adalah pembaruan real-time tampilan glass saat scrolling atau ketika latar video berubah.
    • Kadang bahkan untuk sekadar membuat sesuatu "rata tengah" pun kita harus memakai "5 lapis trik".