CSS すりガラス（Glassmorphism）の作り方｜backdrop-filter の最新実装ガイド

CSS デザイン フロントエンド UI
結論：30秒ですりガラス UI を作成する
  • 基本スタイル: backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.2);
  • ベンダープレフィックス: Safari 用に -webkit-backdrop-filter が必須
  • 生成ツール: 下のコンポーネントでリアルタイムにぼかしと透過度を調整

1. オンライン Glassmorphism ジェネレーター

スライダーで「ぼかし量 (Blur)」「透過度 (Opacity)」「境界線 (Border)」を調整し、リアルタイムにすりガラス質感をプレビューして CSS をコピーできます。

✨ この場でグラスモーフィズムCSSを作る

Glassmorphism 
  
 
 
   




2. 実戦で使う高品位グラスモーフィズム CSS コード


.glass-card {
  /* 1. 半透明背景 (白ベース) */
  background: rgba(255, 255, 255, 0.25);
  
  /* 2. 背後ぼかし (Safari 対応プレフィックス付き) */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  /* 3. 質感アップ用のハイライト枠線と影 */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}




3. 注意点（ハマりどころ）


    

  1. 親要素への overflow: hidden や transform による不具合

      

    • 親要素に will-change や特定の transform が当たっていると、ブラウザのレンダリングコンテキストが変わり、backdrop-filter のぼかしが効かなくなる場合があります。
      • 

    

    2. 

  2. Safari 用ベンダープレフィックスの記述忘れ

      

    • macOS / iOS Safari では現在も -webkit-backdrop-filter が必須です。プレフィックスを省略すると iPhone で単なる半透明ボックスになってしまいます。
      • 

    

    3.