CSSですりガラス（Glassmorphism）を作る方法｜backdrop-filterの使い方

CSS デザイン フロントエンド UI
結論

backdrop-filter: blur(10px); と background: rgba(..., 0.2); を組み合わせる。背景を透過させてからぼかすのがポイント。

基本のCSS

もっともシンプルな「すりガラス」のコードは以下の通りです。

.glass {
  background: rgba(255, 255, 255, 0.2); /* 白の透過背景 */
  backdrop-filter: blur(10px);        /* 背景をぼかす */
  -webkit-backdrop-filter: blur(10px); /* Safari用 */
  border: 1px solid rgba(255, 255, 255, 0.1); /* 境界線をうっすら付けると質感がUP */
  border-radius: 16px;
}

実装のポイント

  1. 透過背景 — background-colorの透明度（alpha）を0.1〜0.4程度に設定します。
  2. backdrop-filter — 要素の後ろにあるものをぼかします。filterプロパティ（自分自身をぼかす）と間違えないように注意。
  3. 境界線（Border） — 白または黒の非常に薄い境界線を引くと、背景との分離がはっきりし、より高級感が出ます。

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

Glassmorphism 
  
 
 
   


ブラウザ対応


backdrop-filterは、現在すべての主要ブラウザでサポートされています。かつてはSafariでプレフィックスが必要でしたが、最新版では標準で動作します。ただし、古いブラウザへのフォールバックとして、ぼかしなしでも文字が読める背景色を設定しておくのがベストプラクティスです。