CSSだけで作る！Glassmorphism（グラスモーフィズム）カードUIの実装方法

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
ここ最近、UIトレンドとしてじわじわ人気が再燃しているのが「Glassmorphism（グラスモーフィズム）」です。

背景をぼかし、半透明の層で奥行きや軽やかさを表現するデザイン手法で、iOSやmacOS、Windows 11のUIなどにも使われているのをご存じの方も多いはず。

今回は、ライブラリを一切使わずに、Pure CSSでGlassmorphismのカードUIを実装する方法を、具体的なコード付きで解説します！

Glassmorphismとは？特徴と効果

Glassmorphismは、その名の通りガラスのような見た目を作るUIデザインです。主な特徴は以下のとおりです。

この効果は、見た目にリッチでありながら読みやすさも確保できるため、カードUIやプロフィール、ナビゲーションモーダルなどにも相性抜群です。

Pure CSSでの基本実装

まずはシンプルなGlassmorphismカードを作ってみましょう。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

HTML構造

<div class="glass-card">
  <h3>Glassmorphism Card</h3>
  <p>透明感のある美しいUIをCSSで実装できます。</p>
</div>

CSSスタイル

  body {
    background: url("https://picsum.photos/800/600?blur") no-repeat center center / cover;
    
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .glass-card {
    width: 300px;
    padding: 2rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    text-align: center;
  }

ポイント解説

応用例：複数カード・グリッド配置

カードを並べて表示したい場合は、CSS GridやFlexboxで調整します。

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 2rem;
  }

HTML内で複数の .glass-card を .container に入れるだけで、レスポンシブなレイアウトが完成します。

アクセントとしてのグラデーション

背景に淡いグラデーションを加えると、よりモダンな印象になります。

.glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  }

アイコン・ボタンとの組み合わせ

Glassmorphismカードの中に、SVGアイコンや透過ボタンを組み合わせるとUI全体の統一感が向上します。

注意点と対応ブラウザ

Glassmorphismは美しい反面、いくつかの制約もあります。

まとめ

Glassmorphismは、CSSだけで手軽に取り入れられるデザインテクニックの一つです。
背景ぼかし・半透明・シャドウ・ボーダーという基本要素を組み合わせることで、視覚的に魅力的でモダンなUIを作ることができます。

名刺カード、プロフィール、モーダル、ポートフォリオUIなど、あらゆる場面で活躍しますので、ぜひ試してみてください！

satokotadesignキャンペーン実施中！