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

 (glass3d.dev)
5 ポイント 投稿者 GN⁺ 2025-07-04 | 1件のコメント | WhatsAppで共有
  • CSSコードで高解像度のガラス効果を実装する方法を提供
  • blur、明るさ（brightness）、彩度（saturate） などの視覚フィルターと多段階シャドウを適用
  • pseudo-element を活用し、前面と背面のレイヤー効果とテクスチャ処理を実装
  • 簡潔なCSSクラス1つだけで、さまざまなUIに適用・カスタマイズ可能
  • 高解像度ガラス効果をすばやくモダンにWebプロジェクトへ導入するのに適している

紹介

このCSSコードは、Web UIで高解像度のガラス効果を生成することに特化した設定です。従来のglassmorphism効果よりも、より緻密で奥行きのある表現が可能で、CSSの単一クラスを適用するだけで直感的に結果を確認できます。

主な内容

  • .glass3d クラスに blur(32px)、明るさ(0.85)、彩度(2.5) などのさまざまな視覚フィルター効果と、カラーおよびノイズテクスチャを挿入
  • 複数段階の box-shadow 構成により、実際に立体感のあるガラスの質感を実現
  • ::before pseudo-element で backdrop-filter、色、ノイズ背景画像を重ね、背景の透明感と立体的な質感を演出
  • ::after pseudo-element で 内側（inset）シャドウ を追加し、実際のガラス表面に光が反射しているような効果を提供
  • z-index の分離により、レイヤーごとの効果が衝突せず正しく表示されるように構造化
  • .glass3d > * セレクタにより、子要素のコンテンツ部分が常に最前面に表示されるように処理

活用背景と利点

  • ライブラリや外部依存なしに、単一のCSSクラスでモダンかつトレンディなガラスエフェクトUIを実装可能
  • UIデザインシステム、カード、ポップアップ、ボタンなどに手軽に適用・拡張でき、Webフロントエンド開発者にとって非常に有用
  • 実際のパターン画像を活用したテクスチャ、多彩な色の組み合わせ、複数段階のシャドウ効果により、従来のglassmorphism手法と比べて奥行き感や明暗表現に強みがある

関連記事

1件のコメント

 
GN⁺ 2025-07-04
Hacker Newsのコメント

  • JavaScriptでページ要素に実際の屈折効果を適用した版を作ったので、ぜひ見てみてほしい https://real-glass.vercel.app/

  • この効果には、表面のすぐ後ろにあるピクセルだけをぼかすという限界がある。この現象をうまく説明しているJosh Comeauの記事(https://www.joshwcomeau.com/css/backdrop-filter/#the-issue)とHacker Newsでの議論(https://news.ycombinator.com/item?id=42302907)を参考までにすすめたい。背景が動くならかなり重要な問題だが、固定されているなら通常はそれほど重要ではない

    • Joshのすばらしい記事を読んでチュートリアル通りに実装しようとしたが、SVGマスクでのborder-radius処理に問題が出た。ハードコードされた要素ではうまく動いたものの、brand/container queryに応じてborder-radiusが変わるコンポーネントライブラリ全体で使う方法は、さらに検討中
    • Joshの解決策は、直感的にもどこかおかしく感じる。周囲の要素が発光する素材であることを前提にしているが、それはWeb上の"material"の物理的な基本特性ではないと思う。自分としては、基本的にmaterialは紙に近いものだと考えている

  • かなりうまくできていると思うが、ガラスの屈折効果がないとLiquid Glassの強いレイヤー分離感が失われる。Materialのデザイン資料を見ると、アプリは一貫して動く3Dレイヤーで構成されるべきだと強調されているが、実際には2Dで実装され、すべての要素が混ざると各レイヤーの区別がとても難しくなる。隅のアクションボタンをユーザーが見つけられないことも多い。モーションがchromeとコンテンツを分ける役割は果たすものの、視覚的にはあまり目立たない。Liquid Glassの最大の利点はedge distortion（エッジの歪み）だと思う。コンテンツが動くとき、人間の視覚がすぐ捉えられる非線形モーションを生み出してくれる。動きがあるとレイヤーの区別がよりはっきりする。この重要な屈折要素がここには欠けている。SVGフィルターでedge distortionを実装するのは簡単ではなく、最終的にはかなり複雑な作業になる。https://atlaspuplabs.com/blog/liquid-glass-but-in-css/… の段階的な解説を見ると、その複雑さがわかる。それと、Liquid Glassのさまざまな実装例を集めたCodePen Sparkコレクションも見つけた。ハードコードされたSVGでかなりよく作られた参考例もあわせておすすめしたい https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

    • AppleはLiquid Glassによって賢い参入障壁（moat）を作ったのだと思う。安価な版なら誰でも簡単に作れるが、本物のように見せるのは非常に難しい。私たちは毎日本物のガラスを見ているので、「本物か偽物か」を直感的に見分けられる。だから模倣品はそれとわかってしまい、Appleは「プレミアム感」を保てる
    • Liquid Glassのedge distortionは本当にすばらしいと思っていて、いつか必ずもう一度作ってみるつもり。今進めているプロジェクトは細部の作り込み、ブラウザ互換性、そして実際の3Dを使わない素材表現に重点を置いている。それに、レイヤーが固定背景の上を動くときのほうが効果が際立つという点にも同意する。現在開発中のデモサイトにはそうした効果が入っていて、まだ未完成。良い資料の紹介に感謝
    • ガラスの屈折効果がレイヤー的な視覚分離を生むという意見には同意する。ただ、自分には屈折効果が少し騒がしすぎて、環境によっては見栄えがよくないと感じる。現実のガラスの物理現象ではあるが、必須だとは思わない。skeuomorphismで一番気に入らなかった要素を拡大したようにも感じる。ちなみに私はiOS 7以前のデザインのほうが好みだった

  • 効果自体はクールだが、自分にはあまりガラスらしく感じられない。すぐ気づく違いは、光がbevel（面取りされた縁）にまったく反応していないこと。光がガラスで反射して照明や色に影響することも期待したい。単なるblur効果だけでは難しい。そしてガラスは独特の影、特にcausticsも生み出せるが、Appleもそこまでは気にしていないようだ。今の影は単純なdrop shadowのように見えて、3Dオブジェクトというより平面的なカード感を強めているだけ。これは最近のトレンドの核心から外れている。こうした効果をCSSだけで実装するのは難しく、むしろGPU上のシェーダーで処理するほうが向いている気がする

    • CSSでできないなら、どうするのがよいのだろう。GPUシェーダー効果を普通のdivに適用できるのかも疑問。基本的なHTMLに直接GPU効果を入れられないなら、結局はカスタムキャンバスのようなもので新しいレンダリングエンジンを作るほうがよいのかもしれない。HTMLはもはや意味を失い、<p>タグでテキストを伝えて残りは全部広告に使われるだけなのだから、いっそ<p>だけ残してGPU統合を改善した、まったく新しい出発点が必要なのかもしれない

  • こういうデザインサンプルを集めている https://github.com/swyxio/spark-joy
    関連資料もいくつかおすすめ

    • https://ui.glass/generator/ : glassmorphismスタイルの無料CSSジェネレーター
    • frosted glass sticky header https://www.joshwcomeau.com/css/backdrop-filter/
    • glassmorphism penサンプル codepen, in context
    • blur+回転効果のCSS例 
      .blur-and-rotate {
 border-radius: 20px;
 backdrop-filter: blur(20px) hue-rotate(120deg);
 -webkit-backdrop-filter: hue-rotate(120deg);
}
    • spark-joyリストにこのプロジェクトを追加してくれてありがとう
    • Spark Joyはとてもすばらしいリソースだと思う
    • ASCII Font generatorを見つけたが、spark-joyにはまだ入っていないようだ。その代わり、よく使うツールをおすすめしておく https://patorjk.com/software/taag/…

  • モバイルではボックスを隠したり折りたたんだりするオプションがあると、使い勝手がずっと良くなりそう。ボックスが画面全体を占めてしまって、後ろの効果があまり見えない。それでも面白いので、大きな画面でまた試してみるつもり。ボックス非表示オプションがあるとかなり助かると思う

  • 自分のglass実装と似た手法を使っているように見える https://news.ycombinator.com/item?id=42225481 とくにbox shadowを積極的に活用している点が近い

    • あなたのプロジェクトは本当にすばらしい。深みを出すために影のレイヤーを何重にも使う開発者が自分だけではないとわかってうれしい。Light Raysを加えた発想がとくに印象的だった

  • Web背景としてうまく機能している

  • 私のスマホではスクロールがかなり遅い。意図的にゆっくり動く別のスクロール効果があるのか、それともglass効果の副作用なのか気になる

    • 面白い指摘だ。ページにはスクロール効果は一切入っていない。実際にどのデバイスとブラウザ、ネットワーク環境なのか共有してもらえると助かる
    • 私のM4、128GB RAMの端末では問題なく動く

  • 本当に良くできていると思う。コンピューターグラフィックスが「特別なひとつの方法」ではなく、実際には「5層のトリック」で成り立っていることには毎回驚かされる。クロスブラウザ対応も大きな挑戦だと思う。どの部分が最もリソースを使っているのか、もし感覚があれば知りたい。単純な予想ではbackdrop-filterではないかと思う

    • 自分もこんなに多くのトリックが必要だとは思っていなかった。いちばん重いのはbackdrop-filterのblur処理。blur値が高いほど周囲のピクセル情報をより多く参照してレンダリングする。もうひとつリソースを使うのは、スクロール時や動画背景が変化するときにglassの見た目をリアルタイムで更新する部分
    • ときには何かを「中央揃え」にするだけでも「5層のトリック」が必要になることがある