メッシュグラデ背景ヒーロー

やわらかく溶け合うメッシュ状グラデーションを背景に敷いた、写真不要で高級感のあるヒーロー。色面がゆっくり動き、抽象的で洗練された第一印象を作ります。SaaSやブランドのトップに。

#hero#title#mesh#gradient

ライブデモ

使用例（お題: カフェ MOON BREW）

この技法を「カフェ MOON BREW」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- MOON BREW：メッシュグラデ背景のカフェヒーロー -->
<section class="thm">
  <div class="thm-mesh" aria-hidden="true">
    <span class="thm-blob thm-blob--1"></span>
    <span class="thm-blob thm-blob--2"></span>
    <span class="thm-blob thm-blob--3"></span>
    <span class="thm-blob thm-blob--4"></span>
  </div>
  <div class="thm-inner">
    <p class="thm-kicker">SINCE 2019 · TOKYO</p>
    <h1>夜に、ひと息を。</h1>
    <p class="thm-sub">写真は不要。やわらかく溶ける灯りの色で、夜の珈琲店へ。</p>
    <div class="thm-actions">
      <button class="thm-btn thm-btn--solid" type="button">メニューを見る</button>
      <button class="thm-btn thm-btn--ghost" type="button">店舗案内</button>
    </div>
  </div>
</section>

CSS

/* MOON BREW（カフェ）：メッシュグラデ背景ヒーローの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.thm { position: relative; width: 100%; min-height: 380px; display: grid; place-content: center; text-align: center; padding: 40px 26px; overflow: hidden; background: #140d07; color: #fff; }
.thm-mesh { position: absolute; inset: -10%; z-index: 0; filter: blur(58px); }
.thm-blob { position: absolute; width: 46%; height: 46%; border-radius: 50%; opacity: .85; mix-blend-mode: screen; }
.thm-blob--1 { background: #b07a3f; top: -6%; left: 4%; animation: thm-m1 13s ease-in-out infinite; }
.thm-blob--2 { background: #e0a458; top: 10%; right: -4%; animation: thm-m2 15s ease-in-out infinite; }
.thm-blob--3 { background: #8a5a2a; bottom: -8%; left: 18%; animation: thm-m1 17s ease-in-out infinite reverse; }
.thm-blob--4 { background: #c2410c; bottom: 4%; right: 14%; animation: thm-m2 12s ease-in-out infinite reverse; }
@keyframes thm-m1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(12%,8%) scale(1.18); } }
@keyframes thm-m2 { 0%,100% { transform: translate(0,0) scale(1.1); } 50% { transform: translate(-10%,-6%) scale(.9); } }

.thm-inner { position: relative; z-index: 2; max-width: 540px; }
.thm-kicker { margin: 0 0 16px; font-size: 11px; letter-spacing: .3em; color: rgba(255,235,210,.8); font-weight: 700; }
.thm h1 { margin: 0; font-size: 42px; font-weight: 900; letter-spacing: -.02em; font-family: "Hiragino Mincho ProN", serif; text-shadow: 0 4px 30px rgba(0,0,0,.35); }
.thm-sub { margin: 18px auto 26px; font-size: 14.5px; line-height: 1.8; color: rgba(255,245,232,.85); max-width: 380px; }
.thm-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.thm-btn { font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; padding: 12px 26px; border-radius: 999px; transition: transform .15s ease; }
.thm-btn--solid { border: none; color: #3a2410; background: #fff; }
.thm-btn--solid:hover { transform: translateY(-2px); }
.thm-btn--ghost { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.45); color: #fff; }
.thm-btn--ghost:hover { background: rgba(255,255,255,.2); }

@media (prefers-reduced-motion: reduce) { .thm-blob { animation: none; } .thm-btn { transition: none; } }

実装ガイド

使いどころ

写真を使わず高級感や柔らかさを出したいSaaS・ブランドのトップに。溶け合うメッシュ状グラデーションが背景でゆっくり動きます。

実装時の注意点

複数の円形ブロブに blur と mix-blend-mode:screen を掛け、translate/scale でゆらして“メッシュ”に見せます。前面テキストには text-shadow を効かせて可読性を確保します。

対応ブラウザ

filter:blur・mix-blend-mode・transform アニメーションは全モダンブラウザ対応。広い blur は描画コストがあるためモバイルでは数を抑えます。

よくある失敗

blur が大きいと端で素の円が透けるので、要素を画面外まではみ出させて余白を確保。色を詰めすぎると濁るため3〜4色に。明るい色面に白文字を重ねる箇所はコントラストに注意します。

応用例

配色のブランド対応、マウス追従でブロブを動かす、静止版を書き出してOGPに、ダーク/ライトでパレット差し替えなどに展開できます。

コード