GODRICH

メッシュグラデーションの上に、あえてグレインを残す

· Godrich · 9種 · 6分で読める

デザイントレンドページテンプレートCSSのみLPヒーローCTAボタン

メッシュグラデーションは、暗い背景の上で複数のぼかした色の塊がオーロラのようににじみ合い、その上にフィルムグレインを重ねる背景スタイルです。AIっぽさを消すために、デザイナーはあえてこのグレインを残します。このスタイルから、9つのパーツをそのまま切り出しました。

下のワンページは、この9パーツを実際につなげたものです。まずは上から下までスクロールして、オーロラがどこで濃くなりどこで薄まるかを見てください。

ページを新しいタブで開く

9パーツはそれぞれ単体でも格子にまとめました。並び順は人気順ではなく、訪問者が実際に画面を追う流れ（目を引き→機能を見て→価格を確認し→口コミで信じ→最後に押す）のとおりです。

01 hero-aurora 02 nav-aurora 03 card-grid-aurora 04 feature-list-aurora 05 pricing-aurora 06 testimonial-aurora 07 cta-band-aurora 08 footer-aurora 09 buttons-inputs-aurora

自動再生 · タイルを押すとその項目へ · すべて1つのzip

01ヒーロー

ぼかした色の塊3つが見出しの奥でそれぞれ違うリズムで漂い、重なり合います。カード自体は濃いインク色で固定し、オーロラはその上を通り過ぎる光としてだけ使います。

blur(60px)translate+rotate그레인 오버레이
.hero-a__orb { position: absolute; width: 46%; aspect-ratio: 1;
  border-radius: 50%; filter: blur(28px); opacity: .85; }
.hero-a__orb--1 {
  background: radial-gradient($color 0%, $color 35%, transparent 68%);
  top: -10%; left: 4%;
  animation: driftA $duration steps(4, jump-none) infinite;
}
@keyframes driftA {
  0%   { transform: translate(0,0) rotate(0deg); }
  50%  { transform: translate(22px, 16px) rotate(20deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}

02ナビゲーション

メニューの背景はほぼ透明で、内側に薄いインク色のガラス層が一枚あるだけです。現在地を示すピルは、3項目ぶんの幅を均等な割合で三等分し、その分だけ移動します。

backdrop-filter: blurtranslateXborder 반투명
.nav-a {
  background: rgba($stage-ink, .38);
  backdrop-filter: blur(10px);
  border: 1px solid rgba($stage-paper, .18);
}
.nav-a__pill {
  position: absolute; top: $sp-1; bottom: $sp-1; left: $sp-1;
  width: calc((100% - #{$sp-1 * 2}) / 3);
  border-radius: $r-pill; background: $color;
  animation: pillSlide $duration $ease-spring infinite;
}

03カードグリッド

カードの枠の位置だけを切り抜いてオーロラ3色の縞模様を見せ、その縞を流し続けます。内側のカード本体は濃いインク色で固定し、視線が枠に留まるようにしています。

repeating-linear-gradient@keyframes sweepmask 이중 레이어
.card-a::before {
  content: ""; position: absolute; inset: 0;
  border-radius: $r-card; padding: $sp-1;
  background: repeating-linear-gradient(120deg,
    $color 0 26px, $stage-yellow 26px 52px,
    $stage-orange 52px 78px, transparent 78px 104px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: sweep $duration linear infinite;
}
@keyframes sweep { to { background-position: 208px 0; } }

04機能一覧

機能ごとに丸いバッジを1つ置き、バッジの中のグラデーションだけを左右に流します。行全体が動くと騒がしくなりますが、小さな点が1つ流れるだけなら視線を自然に引き留められます。

background-size 200%background-positionradius pill
.feat-a__icon {
  width: $sp-8; height: $sp-8; border-radius: $r-pill;
  background: linear-gradient(120deg, $color, $stage-yellow, $stage-orange, $color);
  background-size: 200% 100%;
  animation: iconFlow $duration ease-out infinite;
}
@keyframes iconFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

05料金

おすすめプランのカードだけ、オーロラのグラデーションが呼吸するように明るくなったり暗くなったりし、位置も少しずれます。一般プランは薄いガラスのカードのまま残し、対比をつくります。

radial-gradient 위치 이동opacity 호흡badge 고정
.pricing-a__plan--pro::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(circle at 30% 20%, rgba($color, .9), transparent 60%),
    radial-gradient(circle at 75% 80%, rgba($stage-orange, .85), transparent 60%);
  animation: breathe $duration steps(4, jump-none) infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .3; transform: translate(0, 0); }
  50%      { opacity: 1;  transform: translate(-8%, 8%); }
}

06お客様の声

半透明でガラス質の引用カードの奥で、ぼかしたオーロラの塊が2つゆっくり漂います。カード前面のぼかしは弱めにして、文字ははっきり、背景の色だけがほのかに透けて見えるようにしています。

backdrop-filter: blurtranslate 루프border 반투명
.test-a__orb {
  position: absolute; width: 50%; aspect-ratio: 1;
  border-radius: 50%; filter: blur(20px);
}
.test-a__orb--1 {
  background: radial-gradient($subject-blue 0%, $subject-blue 45%, transparent 72%);
  top: -8%; left: -8%;
  animation: floatA $duration steps(4, jump-none) infinite;
}
.test-a__card {
  background: rgba($stage-ink, .22);
  backdrop-filter: blur(4px);
  border: 1px solid rgba($stage-paper, .18);
}

07CTA帯

画面幅いっぱいの帯1枚にオーロラ5色が流れ続け、その上に静止したグレインを重ねて印刷物のような質感にします。帯全体が動く被写体なので、変化したピクセルの面積は9パーツ中3番目に広い項目です。

background-position 애니메이션mix-blend-mode: overlayradius card
.cta-a {
  background: linear-gradient(120deg,
    $stage-ink, $color, $stage-orange, $stage-yellow, $stage-ink);
  background-size: 300% 100%;
  animation: flow $duration linear infinite;
}
@keyframes flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

08フッター

フィルムグレインをフレームごとに違う位置へジャンプさせ、チラつく質感をつくります。なめらかな曲線の代わりにsteps()を使うのが要で、この項目だけグレイン自体がアニメーションの主役です。

steps() 그레인background-position 랜덤칸 배경 5%
.footer-a::before {
  content: ""; position: absolute; inset: 0;
  opacity: .45; mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba($color, .7) .6px, transparent .6px),
    radial-gradient(rgba($stage-ink, .7) .6px, transparent .6px);
  background-size: 3px 3px, 5px 5px;
  animation: grainJump $duration steps(6, jump-none) infinite;
}
@keyframes grainJump {
  0%   { background-position: 0 0, 0 0; }
  40%  { background-position: 5px -3px, -4px 6px; }
  100% { background-position: 0 0, 0 0; }
}

09ボタン・入力

ボタン内のグラデーションはマウスを乗せたときだけ流れ、入力欄はフォーカスリングの代わりに二重のbox-shadowグローを常時ほのかに光らせます。9パーツの中で唯一ホバーで発動する項目なので、撮影時はis-demoクラスで強制的に再生させました。

background-position 호버box-shadow 이중 글로우radius control
.bi-a__btn {
  background: linear-gradient(120deg, $color, $stage-orange, $subject-blue, $color);
  background-size: 260% 100%;
}
.bi-a__btn:hover, .bi-a__btn:focus-visible {
  animation: shift $duration ease-out infinite;
}
.bi-a__input {
  box-shadow: 0 0 0 2px rgba($subject-blue, .55), 0 0 16px rgba($stage-orange, .45);
}

tailwind.config カスタム

9パーツが使い回す色・角丸の値は、この設定ひとつだけです。オーロラの3色をここで変えれば全パーツに一度に反映されます — ただし例外が2つあります。グレインの濃さはこのファイルにはなく、ワンページビルド自身の<style>ブロックにopacity値として直書きされています。さらにbg-auroraのグラデーションは上のcolorsを参照せず同じ16進値をリテラルで重複して書いているため、ここで色を変えてもこのユーティリティだけは自動では変わりません — 両方を書き換える必要があります。

theme: {
  extend: {
    colors: {
      ink: "#17141a", cream: "#fff7e6", paper: "#ffffff",
      blue: "#2f6df6", yellow: "#ffd23f", orange: "#ff4d1f",
    },
    borderRadius: { tile: "16px", control: "12px", pill: "999px" },
    backgroundImage: {
      aurora: "linear-gradient(120deg, #17141a, #2f6df6, #ff4d1f, #ffd23f, #17141a)",
    },
  },
},

バイブコーディング プロンプト

上の設定をプロジェクトに入れたら、Claude CodeやCursorには下の断片を渡すだけで十分です。全文はzip内のprompt.mdに入っています。

背景はinkのみ。強調したい場所だけ blur(40〜60px) をかけた blue・yellow・orange
の塊を2〜3個重ね、オーロラのようににじませる。背景全体をグラデーションで
塗らない。暗い面にはどこでも、うっすらしたグレイン(radial-gradient の点
パターン、opacity .3前後)を重ねる。画像ファイルではなくCSSだけでつくる。

この指示をpage/index.htmlにそのまま反映し、1280px幅の画面全体をキャプチャしたのが下のスクリーンショットです。

結果

どこで壊れるか — 落とし穴

オーロラの塊を滑らかなease曲線だけで動かすと、ぼかしの奥ではフレーム間の変化が小さすぎて、アニメーションがあってもないように見える瞬間が生まれます。05番のおすすめプランを最初につくったとき、opacityを0.55から1へ往復させるだけにしたところ、レンダー計測で変化の強度が0と出ました。振れ幅を0.3〜1に広げ、タイミングをsteps(4, jump-none)に変えてようやく6フレーム以上で検出されるようになりました。<ul>や<figure>・<blockquote>のようなセマンティックタグをそのまま使うのも落とし穴です。ブラウザ既定の余白が残っていると320px幅で縦にはみ出し、04番の機能一覧と06番のお客様の声カードが実際にこの問題を抱えていて、margin: 0を明示的に加えてからスクロールバーが消えました。9パーツとワンページ全体のソースをまとめた圧縮ファイルはパスワードu7eepwrpを入れないと開けませんが、下のボタンからダウンロードできます。

最後の落とし穴はコントラストです。オーロラの彩度を下げたり背景を明るい色に変えたりすると、グレインと重なって文字のコントラストが崩れやすいので、文字を置く場所は常に濃いインク色の固定背景の上にするのが安全です。

アクセシビリティ

09番ボタンのグラデーションの流れと、01・06・07・08番のオーブの漂い・CTAの流れ・グレインのジャンプはすべてMDNのprefers-reduced-motionドキュメントが定義するメディアクエリで包んであり、動きを減らす設定を有効にした訪問者には静止したグラデーションと静止したグレインだけが見えます。03番のカード枠のようにmask-compositeを使う項目はMDNのmask-compositeドキュメントを参考に、旧Safari向けの-webkit-mask-composite: xorも併記しています。引用文やボタンの文字は常にインク色の背景に白文字、またはクリーム色の背景にインク色の文字で置き、グラデーションが流れている間もコントラストが崩れないようにしています。

このスタイル以外のトレンドも見たい方はデザイントレンドカテゴリにまとめてあり、このサイト全体のコンセプトは紹介ページで確認できます。

FAQ

メッシュグラデーションはCSSだけでつくれますか?

はい、この編の9パーツはすべてJS 0行です。09番ボタンのホバー反応も:hover・:focus-visible疑似クラスだけで処理しており、JavaScriptはデモを撮影するときにアニメーションを強制再生させる用途でしか使っていません。

グレインのテクスチャは画像ファイルが必要ですか?

いいえ。この編のグレインはごく小さなradial-gradientの点を2つ重ね、background-sizeを3〜5pxで密に繰り返す方式なので、画像リクエストは一度も発生しません。08番フッターのように点の位置をフレームごとにずらせば、フィルムグレイン特有のチラつきもCSSだけで再現できます。

暗い背景でなくてもメッシュグラデーションは使えますか?

明るい背景の上でもオーロラの塊自体はそのまま使えますが、この編の9パーツはすべて濃いインク色の背景を既定値にしています。明るい背景では、塊の不透明度を下げ、グレインの合成モードをoverlayからmultiplyに変えると同程度の質感を保てます。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。