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でプレフィックスが必要でしたが、最新版では標準で動作します。ただし、古いブラウザへのフォールバックとして、ぼかしなしでも文字が読める背景色を設定しておくのがベストプラクティスです。


関連記事


この記事は フロントエンド・CSS テーマの一環です。あわせて読むと理解が深まる関連記事をまとめました。



























































トピック記事
CSS Grid vs FlexboxCSS Grid vs Flexbox｜どっちを使う？使い分けと実戦レイアウト
CSS Container Queries 完全ガイドCSS Container Queries 完全ガイド｜@container・size vs inline-size・コンポーネント単位レスポンシブ
CSSで浮き出るカードを作るCSSで浮き出るカードを作る｜きれいなbox-shadowの数値設定
CSSの単位はpxとremどちらが良い？CSSの単位はpxとremどちらが良い？｜基準16pxの理由と使い分け
Fluid Typographyの作り方Fluid Typographyの作り方｜vwとclampでレスポンシブ対応を自動化
line-height計算 - 読みやすい行間をフォントサイズから算出line-height計算 - 読みやすい行間をフォントサイズから算出
Tailwind CSSでデザインシステムの色を管理する方法Tailwind CSSでデザインシステムの色を管理する方法
色のコントラストチェック色のコントラストチェック｜color contrastの使い方と注意点
React SSR Hydration Mismatch 原因と修正React SSR Hydration Mismatch 原因と修正｜Next.js・Astro対応ガイド
HTML Popover API 完全ガイドHTML Popover API 完全ガイド｜popover・popovertarget・light dismiss・アクセシビリティ
CSS Gradient 作り方CSS Gradient 作り方｜linear・radial の指定
Glassmorphism CSSGlassmorphism CSS｜backdrop-filter 実装