高解像度ガラス効果のためのCSSジェネレーター

 (glass3d.dev)
5 ポイント 投稿者 GN⁺ 2025-07-04 | 1件のコメント | WhatsAppで共有
  • glass3d generator は、設定値を変更しながら ガラス質感のCSS を即座にプレビューしてコピーできるツール
  • 主要な調整項目は backdrop-filter の blur、brightness、saturation と、色およびテクスチャの選択で構成される
  • 色は HSL とアルファ値で扱い、例の値は hsl(189 80% 10% / 0.2)
  • テクスチャは rice paper、egg shell、ink jet、coarse、topology から選択可能
  • 生成される CSS は .glass3d、::before、::after、子要素の z-index を組み合わせ、背景フィルター、ノイズテクスチャ、内側の影、コンテンツレイヤーを分離する

glass3d generator で調整できる値

  • 設定値を変更すると、インターフェース自体に結果がすぐ反映 される
  • 完成した CSS はコピーして利用できる
  • 主な設定項目は次のとおり
    • backdrop-filter
    • blur
    • brightness
    • saturation
    • color
    • texture

生成される CSS の構造

  • .glass3d クラスは CSS 変数とレイヤー基準を定義する
    • --filter-glass3d: blur(32px) brightness(0.85) saturate(2.5)
    • --color-glass3d: hsl(189 80% 10% / 0.2)
    • --noise-glass3d: transparenttextures.com の egg-shell.png
    • position: relative、z-index: 4、複数段階の box-shadow を使用する
  • .glass3d::before は 背景フィルターとテクスチャ を適用する
    • -webkit-backdrop-filter と backdrop-filter に var(--filter-glass3d) を使用する
    • background-color と background-image には、それぞれ色の変数とノイズの変数が入る
    • background-size: 100px、background-repeat: repeat を設定する
  • .glass3d::after は 内側のハイライトシャドウ を加える
    • 複数の inset box-shadow の値を使用する
  • .glass3d > * には、コンテンツが前面に表示されるよう position: relative と z-index: 6 を適用する

関連記事

1件のコメント

 
GN⁺ 2025-07-04
Hacker News の意見

  • この方式には、表面のすぐ背後にあるピクセルだけを使ってぼかしを適用してしまう問題があり、https://www.joshwcomeau.com/css/backdrop-filter/#the-issueでよく示されている
    https://news.ycombinator.com/item?id=42302907 の議論とあわせて読む価値がある。背景が下で動くなら、すぐ背後のピクセルだけをぼかす問題はかなり重要で、静的な背景なら普通はそれほど重要ではない

    • Josh の素晴らしい記事を読んでチュートリアルも実装してみたが、SVG マスクで border-radius を処理する部分で問題が起きた
      ハードコードされた要素ではうまくいったものの、ユーザーのブランディングやコンテナクエリに応じて border-radius が変わるコンポーネントライブラリ全体でどう動かすかは、まだ解く必要がある
    • Josh の解決策も直感的には間違っているように見える。近くの要素を発光体だと仮定しているようだが、Web の「マテリアル」が基本的にそうした物理特性を持つとは考えにくい
      むしろ基本のマテリアルは紙に近いと見たほうがよい
    • どちらがより正しいとも言いにくい。標準の方式は、すりガラスのすぐ背後にある物体を近似し、調整後の方式ははるか遠くにある物体を模倣する
      自分には調整後のバージョンのほうが奥行きの手がかりと衝突して、ずっと散漫で、より間違って見える

  • かなり良さそうに見えるが、ガラスの屈折性が抜けると、Liquid Glass の最大の貢献だと思う強いレイヤー分離感が失われる
    Material には、アプリが一貫して動くレイヤーで構成されるべきだということを側面 3D で示す、優れたデザイナー向け資料がある。ところが 2D に統合すると、どの機能がどこにあるのかを見つけるのが非常に難しくなる。隅のアクションボタンを人々が見落とすことは本当に多い
    動きはクロームとコンテンツを区別するのに多少役立つが、視覚的に定義してくれる要素が少なすぎる。Liquid Glass の最大の長所はエッジの歪みだと思う。コンテンツが動くと非線形の動きが生じ、人間の視覚はそれを即座に捉える
    静的なスクリーンショットは必ずしも良く見えないが、動いているときは、これまで見てきたものより要素の区別がはるかにつきやすい。人間の動き検知を大きく活用する中核的な屈折要素が、ここでは抜けている
    以前、素晴らしい Web デモをもう一つ見たのだが今は見つけにくく、代わりにこのデモはモバイルでは性能が悪く視覚的にもやや劣るものの、作業がどれほど複雑かを段階的によく示している。SVG フィルターだけでエッジの歪みを実装するのはかなり過酷な道だ: https://atlaspuplabs.com/blog/liquid-glass-but-in-css#breaki...
    Liquid Glass の試作集（CodePen Spark）も見つけた。2つ目のリンクは、かなり具体的に事前定義されたハードコード SVG でかなりよく作られた例だと思う: https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

    • Apple は Liquid Glass で巧妙な堀を築いたように思う。より悪いバージョンは簡単に作れるが、本当に正しいやり方は非常に難しい効果を選んだということだ
      人々は毎日本物のガラスを見ているので、何が本物らしく正しいかについて直感を持っている。そのため模倣品は明らかに劣って見え、Apple は「高級に見える」製品イメージを維持できる
    • Liquid Glass のエッジの歪みが格好よく見えることには同意するし、後で自分でも再現してみるつもりだ
      現在のプロジェクトでは、洗練された感じがあり、ブラウザ間で一貫して動作し、実際の 3D を使わないマテリアルを作ることが目標だった。固定背景の上で動くと効果がよりよく見えるという指摘もその通りだ。作業中のライブラリのデモサイトではそうしているが、まだ準備はできていない
    • 屈折効果が抜けているのはむしろ良い。すりガラスでもすでに曖昧だと感じるのに、屈折効果は本当に嫌いだ。あまりに気が散るし、特定の状況では常に醜く見えざるを得ない
      実際のガラスがそう振る舞うのは分かっているが、気にしたくない。スキューモーフィズムの最悪の部分だけを選んで二倍に押し進めたように見えるし、iOS 7 以前のほうが好きだった立場でもそう感じる

  • クールな効果ではあるが、自分には実際のガラスのようには感じられない
    最もすぐ分かる違いは、光がベベルと相互作用していないことだ。光がガラスの中に再び入り、照明や色にも影響するはずだと期待する。単にぼかしを入れるだけでは不十分だ
    また、ガラスには固有の影や興味深い集光模様があり得る。ここでは影は見えるが単純なドロップシャドウのように感じられ、新しい流れの一部である 3D 物理オブジェクトというより、平らなカードのように見える
    いずれにせよ CSS だけで真似するのは簡単ではなく、GPU 上で動くシェーダーのほうが適しているように思う

    • CSS でできないなら、どうすればいいのか分からない。一般的な div に GPU シェーダー効果をどう適用できるのだろうか。標準の HTML に GPU 効果を適用できず、任意の Canvas の組み合わせのようなカスタム要素に対して行う必要があるなら、GPU 効果を適用できるまったく新しいレンダリングエンジンを作り直したほうがいいのかもしれない
      HTML は死んだと思う。テキストを届けるにはいくつかのタグで十分で、それ以外の大半は Web ページを広告爆弾にするために使われている。だから <text> タグとより良い GPU 統合でやり直し、残りは取り除いたほうがよい

  • ページ内の要素を実際に屈折させる JavaScript 版を作った: https://real-glass.vercel.app/

    • Safari ではすりガラス効果が動作しない

  • こういうものを集めています: https://github.com/swyxio/spark-joy
    ほかの資料としては、glassmorphism のデザイン仕様に基づく無料 CSS ジェネレーター https://ui.glass/generator/、曇りガラス風の固定ヘッダー https://www.joshwcomeau.com/css/backdrop-filter/、glassy glassmorphism の codepen と in context があります

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

  • 本当にうまく作られています。コンピュータグラフィックスが「変な小技 1 つ」ではなく、5 つのトリックを幾重にも重ねたものに近いというのは、いつも驚かされます
    ブラウザ間の互換性まで合わせるのは、さらに難題です。どの部分がいちばんリソースを消費するのか、感覚的に分かるのか気になります。単純に考えると backdrop-filter だと思います

    • その通りで、実装にこれほど多くのトリックが必要だとは思いませんでした
      直感は当たっていて、いちばんリソースを消費する部分は backdrop-filter のぼかし処理です。ぼかしの値が大きいほど、レンダリング前により多くの隣接ピクセルを「参照」する必要があります
      もう 1 つ高コストな要素は、スクロールしたり動画背景によってガラスの見た目が変わったりするたびに、継続的に再描画しなければならない点です
    • ときには何かを「中央揃え」するだけでも、5 層のトリックが必要になります

  • 自分のガラス実装と似た手法を使っているようです: https://news.ycombinator.com/item?id=42225481
    特に box-shadow を過剰に活用しているところが似ています

    • プロジェクトが格好よく見えます。影を 5 層以上掘り下げる人が自分だけではないと分かってうれしいです。特に Light Rays の追加が印象的です

  • 小さな問題: 上部と、トグル/コードがあるスクロール領域の間の影が、下にスクロールすると消えます。おそらく最初は隠れていて、その後現れるべきものだと思います

    • よく見つけました。フェードインの問題ではなく、影が単に画面外へスクロールして出ていっているのです
      その「オーバーハング」する box-shadow は、ある要素から下に落とす形ではなく、要素の内側に適用されるように設計していたのですが、この場合は後者の方式の影を適用すべきだと気づきました

  • 私のスマートフォンでは、コンテンツのスクロールがかなり遅いです。意図的に遅くしている別のスクロール効果があるのか、それともガラス効果の副作用なのか気になります

    • 興味深いですが、ページ上のどこにもスクロール効果はありません。使っている端末、ブラウザ、インターネット接続の状況を教えてもらえるか気になります
    • M4 と 128GB RAM では問題なく動作します

  • 見落としているだけかもしれませんが、モバイルではボックスを隠すか折りたためるようにできると、ずっと便利になりそうです
    今は画面全体を占めていて、背後の効果をほとんど見られません。それでも興味はあるので、あとで大きな画面で再度試すつもりですが、ボックスを隠すオプションがあればかなり良くなると思います

    • コードのプレビュー領域のことを言っているのか気になります
      最初の実装ではジェネレーター UI の上に小さなデモ用の四角形を置いていましたが、小さいものですらスペースを取りすぎて UI が使いにくくなりました。ページ全体をスクロールさせると、編集中の四角形を見るにはスクロール位置が最上部でなければならないことが分かりにくく、ユーザーがいら立っていました
      このツールは主にコーディング用なのでデスクトップ体験を優先しており、モバイルはすばやいプレビューと、モバイルでも動くことの証明に近い位置づけです。それでもモバイルで本当にうまく動作する似たような UI を知っているなら、リンクを見てみたいです