Generator CSS untuk Efek Kaca Resolusi Tinggi

 (glass3d.dev)
5 poin oleh GN⁺ 2025-07-04 | 1 komentar | Bagikan ke WhatsApp
  • glass3d generator adalah alat untuk langsung mempratinjau dan menyalin CSS bertekstur kaca sambil mengubah nilai pengaturan
  • Nilai penyesuaian utamanya terdiri dari blur, brightness, saturation pada backdrop-filter, serta pilihan warna dan tekstur
  • Warna ditangani dengan HSL dan nilai alfa; contoh nilainya adalah hsl(189 80% 10% / 0.2)
  • Tekstur dapat dipilih dari rice paper, egg shell, ink jet, coarse, dan topology
  • CSS yang dihasilkan menggabungkan .glass3d, ::before, ::after, serta z-index elemen anak untuk memisahkan filter latar belakang, tekstur noise, bayangan dalam, dan layer konten

Nilai yang dapat disesuaikan di glass3d generator

  • Saat nilai pengaturan diubah, hasilnya langsung diterapkan pada antarmuka itu sendiri
  • CSS yang sudah selesai dapat disalin dan digunakan
  • Item pengaturan utama adalah sebagai berikut
    • backdrop-filter
    • blur
    • brightness
    • saturation
    • color
    • texture

Struktur CSS yang dihasilkan

  • Class .glass3d mendefinisikan variabel CSS dan acuan layer
    • --filter-glass3d: blur(32px) brightness(0.85) saturate(2.5)
    • --color-glass3d: hsl(189 80% 10% / 0.2)
    • --noise-glass3d: egg-shell.png dari transparenttextures.com
    • Menggunakan position: relative, z-index: 4, dan beberapa tingkat box-shadow
  • .glass3d::before menerapkan filter latar belakang dan tekstur
    • Menggunakan var(--filter-glass3d) pada -webkit-backdrop-filter dan backdrop-filter
    • Masing-masing variabel warna dan variabel noise dimasukkan ke background-color dan background-image
    • Mengatur background-size: 100px dan background-repeat: repeat
  • .glass3d::after menambahkan bayangan highlight bagian dalam
    • Menggunakan beberapa nilai inset box-shadow
  • .glass3d > * menerapkan position: relative dan z-index: 6 agar konten terlihat di atas

Bacaan terkait

1 komentar

 
GN⁺ 2025-07-04
Komentar Hacker News

  • Pendekatan ini punya masalah karena menerapkan blur hanya pada piksel tepat di belakang permukaan, dan hal itu ditunjukkan dengan baik di https://www.joshwcomeau.com/css/backdrop-filter/#the-issue
    Layak dibaca bersama diskusi di https://news.ycombinator.com/item?id=42302907. Jika latar belakang bergerak di bawahnya, masalah blur yang hanya mengenai piksel tepat di belakang menjadi cukup penting; jika latarnya statis, biasanya tidak terlalu penting

    • Saya membaca tulisan Josh yang bagus itu dan juga mengimplementasikan tutorialnya, tetapi mengalami masalah pada bagian menangani border-radius dengan mask SVG
      Itu berjalan baik pada elemen yang di-hardcode, tetapi saya masih harus mencari cara agar bisa bekerja di seluruh pustaka komponen yang border-radius-nya berubah sesuai branding pengguna dan container query
    • Solusi Josh juga secara intuitif tampak keliru. Sepertinya ia mengasumsikan elemen-elemen di dekatnya sebagai pemancar cahaya, padahal sulit mengatakan bahwa “material” di web secara default punya sifat fisik seperti itu
      Saya justru cenderung menganggap material default lebih mirip kertas
    • Sulit mengatakan mana yang lebih benar. Cara default mengaproksimasi benda yang berada tepat di belakang kaca buram, sedangkan cara yang disesuaikan meniru benda yang berada jauh lebih belakang
      Bagi saya, versi yang disesuaikan berbenturan dengan petunjuk kedalaman, sehingga jauh lebih mengganggu dan tampak lebih salah

  • Terlihat cukup bagus, tetapi tanpa refraksi kaca, kesan pemisahan layer yang kuat—yang menurut saya merupakan kontribusi terbesar Liquid Glass—jadi hilang
    Material punya materi desainer yang bagus, menampilkan dari sudut 3D bahwa aplikasi seharusnya tersusun dari layer bergerak yang konsisten. Namun ketika digabungkan menjadi 2D, sangat sulit menemukan fungsi mana berada di mana. Sering sekali orang tidak melihat tombol aksi di sudut
    Gerakan memang sedikit membantu membedakan chrome dan konten, tetapi terlalu sedikit elemen yang mendefinisikannya secara visual. Menurut saya, keunggulan terbesar Liquid Glass adalah distorsi tepi. Saat konten bergerak, muncul gerakan nonlinier, dan penglihatan manusia langsung menangkapnya
    Tangkapan layar statis tidak selalu terlihat bagus, tetapi saat bergerak, pemisahan elemennya jauh lebih jelas daripada hal-hal lain yang pernah saya lihat. Elemen refraksi inti yang sangat memanfaatkan deteksi gerak manusia itu tidak ada di sini
    Dulu saya pernah melihat satu demo web lain yang bagus, tetapi sekarang sulit ditemukan; sebagai gantinya, demo ini performanya buruk di mobile dan secara visual juga kurang bagus, tetapi menjelaskan tahap demi tahap betapa rumitnya pekerjaan itu. Mengimplementasikan distorsi tepi hanya dengan filter SVG adalah jalan yang cukup berat: https://atlaspuplabs.com/blog/liquid-glass-but-in-css#breaki...
    Saya juga menemukan kumpulan percobaan Liquid Glass (CodePen Spark), dan menurut saya tautan kedua adalah contoh yang cukup bagus, dibuat dengan SVG hardcoded yang sudah didefinisikan sebelumnya secara sangat spesifik: https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

    • Sepertinya Apple membuat moat yang cerdas dengan Liquid Glass. Mereka memilih efek yang versi lebih buruknya mudah dibuat, tetapi cara yang benar-benar tepat sangat sulit
      Orang melihat kaca sungguhan setiap hari, jadi mereka punya intuisi tentang apa yang terasa nyata dan benar. Karena itu, tiruannya terlihat jelas lebih buruk, dan Apple bisa mempertahankan citra produk yang “terlihat premium”
    • Saya setuju bahwa distorsi tepi Liquid Glass terlihat keren, dan berniat mencoba mereproduksinya sendiri nanti
      Untuk proyek saat ini, tujuannya adalah membuat material yang terasa polished, bekerja konsisten lintas browser, dan tidak memakai 3D sungguhan. Benar juga bahwa efeknya lebih terlihat saat bergerak di atas latar tetap. Saya melakukan itu di situs demo pustaka yang sedang dikerjakan, tetapi belum siap
    • Justru bagus bahwa efek refraksinya tidak ada. Kaca buram saja sudah terasa ambigu bagi saya, dan saya benar-benar tidak suka efek refraksi. Terlalu mengganggu dan dalam situasi tertentu pasti selalu terlihat jelek
      Saya tahu kaca sungguhan memang bekerja seperti itu, tetapi saya tidak ingin memikirkannya. Rasanya seperti mengambil bagian terburuk dari skeuomorphism lalu mendorongnya dua kali lipat; bahkan sebagai orang yang lebih menyukai masa sebelum iOS 7, saya tetap merasa begitu

  • Ini memang efek yang keren, tetapi bagi saya tidak terasa seperti kaca sungguhan
    Perbedaan paling langsung adalah cahaya tidak berinteraksi dengan bevel. Saya berharap cahaya masuk kembali ke dalam kaca dan juga memengaruhi pencahayaan serta warna. Sekadar menambahkan blur saja tidak cukup
    Selain itu, kaca bisa memiliki bayangannya sendiri dan pola kaustik yang menarik. Di sini bayangannya terlihat, tetapi terasa seperti drop shadow sederhana, sehingga tampak seperti kartu datar, bukan objek fisik 3D yang menjadi bagian dari alur baru
    Bagaimanapun, ini tidak mudah ditiru hanya dengan CSS, dan shader yang berjalan di GPU tampaknya lebih cocok

    • Kalau tidak bisa dengan CSS, saya tidak tahu harus bagaimana. Bagaimana cara menerapkan efek shader GPU ke div biasa? Jika efek GPU tidak bisa diterapkan ke HTML dasar dan harus ke elemen kustom seperti kombinasi Canvas arbitrer, mungkin lebih baik membuat ulang mesin rendering yang benar-benar baru yang bisa menerapkan efek GPU
      Menurut saya HTML sudah mati. Untuk menyampaikan teks, beberapa tag saja cukup; sebagian besar sisanya dipakai untuk mengubah halaman web menjadi bom iklan. Jadi lebih baik mulai lagi dengan tag <text> dan integrasi GPU yang lebih baik, lalu buang sisanya

  • Saya membuat versi JavaScript yang benar-benar merefraksikan elemen-elemen di halaman: https://real-glass.vercel.app/

    • Di Safari, efek buram tidak berfungsi

  • Sedang mengumpulkan hal-hal seperti ini: https://github.com/swyxio/spark-joy
    Sebagai materi lain, ada generator CSS gratis berbasis spesifikasi desain glassmorphism https://ui.glass/generator/, header tetap bergaya kaca berembun https://www.joshwcomeau.com/css/backdrop-filter/, glassy glassmorphism codepen dan in context

    .blur-and-rotate {  
border-radius: 20px;  
backdrop-filter: blur(20px) hue-rotate(120deg);  
-webkit-backdrop-filter: hue-rotate(120deg);  
}

  • Dibuat dengan sangat baik. Selalu mengagumkan bahwa grafika komputer bukan “satu trik aneh”, melainkan lebih mirip 5 trik yang ditumpuk berlapis-lapis
    Menyesuaikan kompatibilitas lintas browser adalah tantangan tambahan. Penasaran apakah ada gambaran bagian mana yang paling boros resource. Kalau dipikir sederhana, sepertinya backdrop-filter

    • Benar, saya tidak menyangka implementasinya membutuhkan sebanyak ini trik
      Instingnya tepat; bagian yang paling boros resource adalah blur pada backdrop-filter. Semakin besar nilai blur, semakin banyak piksel tetangga yang harus “dirujuk” sebelum rendering
      Faktor mahal lainnya adalah harus terus digambar ulang saat scrolling atau ketika latar video mengubah tampilan kaca
    • Kadang, untuk “meratakan ke tengah” sesuatu saja juga perlu 5 lapis trik

  • Sepertinya memakai teknik yang mirip dengan implementasi kaca saya: https://news.ycombinator.com/item?id=42225481
    Terutama bagian yang memanfaatkan box-shadow secara berlebihan terasa mirip

    • Proyeknya terlihat keren. Senang rasanya mengetahui bukan cuma saya yang menggali shadow sampai 5 lapis atau lebih. Tambahan Light Rays khususnya mengesankan

  • Masalah kecil: bayangan antara bagian atas dan area scroll yang berisi toggle/kode menghilang saat menggulir ke bawah. Mungkin seharusnya awalnya tersembunyi lalu muncul

    • Tangkapan yang bagus. Itu bukan masalah fade-in; bayangannya memang sekadar terscroll keluar dari layar
      “Overhang” box-shadow itu didesain untuk diterapkan di dalam elemen, bukan sebagai bayangan yang jatuh ke bawah dari suatu elemen, dan dalam kasus ini saya sadar perlu menerapkan bayangan dengan cara yang terakhir

  • Di ponsel saya, scrolling kontennya cukup lambat. Penasaran apakah ada efek scroll lain yang sengaja membuatnya lambat, atau itu efek samping dari efek kaca

    • Menarik, tapi tidak ada efek scroll di mana pun pada halaman. Penasaran bisa beri tahu perangkat, browser, dan kualitas koneksi internet yang dipakai?
    • Di M4 dengan RAM 128GB berjalan lancar

  • Mungkin saya melewatkan sesuatu, tapi di mobile rasanya akan jauh lebih berguna kalau kotaknya bisa disembunyikan atau diciutkan
    Saat ini kotak itu memenuhi seluruh layar sehingga efek di belakangnya hampir tidak terlihat. Meski begitu saya tetap tertarik dan berencana mencobanya lagi nanti di layar yang lebih besar, tapi opsi untuk menyembunyikan kotak akan membuatnya jauh lebih baik

    • Penasaran apakah yang dimaksud area pratinjau kode
      Pada implementasi pertama, saya menaruh persegi demo kecil di atas UI generator, tetapi bahkan yang kecil pun memakan terlalu banyak ruang sehingga UI sulit dipakai. Kalau seluruh halaman dibuat bisa discroll, orang-orang jadi frustrasi karena tidak jelas bahwa mereka harus berada di bagian paling atas scroll untuk melihat persegi yang sedang diedit
      Alat ini utamanya untuk coding, jadi saya memprioritaskan pengalaman desktop, sementara mobile lebih diposisikan sebagai pratinjau cepat dan bukti bahwa ini juga berjalan di mobile. Namun kalau ada UI serupa yang benar-benar bekerja bagus di mobile, saya ingin melihat tautannya