「ガラス越し」のような透明感——グラスモーフィズム。「押し込める」ような立体感——ニューモーフィズム。どちらもCSSだけで実装できる、2026年も注目が続くデザイントレンドです。
本記事では、両スタイルの実装方法と使いどころを、コピペ可能なコードで解説します。
1. グラスモーフィズム
backdrop-filter: blur() でカードの背景をぼかし、半透明にするスタイル。背景のカラフルなグラデーションが透けて見えることで、奥行きと高級感が生まれます。
Glass Card
背景が透けて見える、洗練されたカードデザイン
HTML
<div class="glass-bg">
<div class="glass-card">
<p class="glass-card__title">Glass Card</p>
<p class="glass-card__text">背景が透けて見える、洗練されたカードデザイン</p>
</div>
</div>
CSS
/* ===== ベースのレイアウト（デザインに合わせて調整してください） ===== */
.glass-bg {
/* 本体のスタイル */
}
.glass-card__title {
/* 本体のスタイル */
}
.glass-card__text {
/* 本体のスタイル */
}
/* ===== 動作のアニメーション ===== */
.glass-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 16px;
padding: 24px;
}
💡 ポイント：
backdrop-filter は背面にコンテンツがないと効果が見えません。カラフルなグラデーション背景や画像の上に置くのが鉄則です。-webkit- プレフィックスも忘れずに。
2. ニューモーフィズム
フラットな背景と同色の要素に、光と影の2つの box-shadow をつけることで、まるで粘土から浮き出たような立体感を表現するスタイルです。
⚙️
設定
HTML
<div class="neu-bg">
<div class="neu-card">
<div class="neu-card__icon">⚙️</div>
<p class="neu-card__title">設定</p>
</div>
<div style="display:flex;align-items:center;">
<button class="neu-btn">押してみる</button>
</div>
</div>
CSS
/* ===== ベースのレイアウト（デザインに合わせて調整してください） ===== */
.neu-card__title {
/* 本体のスタイル */
}
.neu-card__icon {
/* 本体のスタイル */
}
.neu-btn {
/* 本体のスタイル */
}
.neu-bg {
/* 本体のスタイル */
}
/* ===== 動作のアニメーション ===== */
/* 浮き出し（凸） */
.neu-card {
background: #E0E5EC;
border-radius: 16px;
box-shadow:
8px 8px 16px #B8BEC7,
-8px -8px 16px #FFFFFF;
}
/* 押し込み（凹） - :active時 */
.neu-button:active {
box-shadow:
inset 4px 4px 10px #B8BEC7,
inset -4px -4px 10px #FFFFFF;
}
3. 組み合わせ：ダーク × グラスモーフィズム
ダークテーマにグラスモーフィズムを組み合わせると、プレミアム感のある洗練されたUIが生まれます。SaaSのダッシュボードやポートフォリオサイトに特に効果的です。
Premium
プレミアムプラン
すべての機能が利用可能。チームでの共同編集もOK。
HTML
<div class="combined-bg">
<div class="combined-card">
<span class="combined-card__tag">Premium</span>
<p class="combined-card__title">プレミアムプラン</p>
<p class="combined-card__text">すべての機能が利用可能。チームでの共同編集もOK。</p>
<button class="combined-card__btn">今すぐ始める</button>
</div>
</div>
CSS
/* ===== ベースのレイアウト（デザインに合わせて調整してください） ===== */
.combined-bg {
/* 本体のスタイル */
}
.combined-card__title {
/* 本体のスタイル */
}
.combined-card__tag {
/* 本体のスタイル */
}
.combined-card__text {
/* 本体のスタイル */
}
.combined-card {
/* 本体のスタイル */
}
.combined-card__btn {
/* 本体のスタイル */
}
/* ===== 動作のアニメーション ===== */
/* ダーク背景 */
.dark-section {
background: linear-gradient(135deg, #1A1A2E, #16213E);
}
/* ダーク × グラス */
.dark-glass-card {
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
color: #fff;
}
まとめ：トレンドは「意味」を持って使う
- グラスモーフィズム → 背景と前景の奥行き表現。ヒーローやモーダルに
- ニューモーフィズム → 触れるような立体感。ボタンやカードに
- ダーク × グラス → プレミアム感。SaaSやポートフォリオに
どのスタイルも「見た目がかっこいいから」ではなく、「ユーザーに何を伝えたいか」を軸に選択しましょう。
💡 ツタワルの制作では：トレンドを追うだけでなく、ブランドの世界観に合ったビジュアル表現を選択・提案しています。デザイナーとエンジニアが一つのチームとして、「見た目」と「実装品質」の両方にこだわります。