GODRICH
#cssアニメーション#ボタン#ローディング#トランジション#スクロール#ダッシュボード#実用ui#デザイントレンド

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

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

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

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

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

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

オーロラ グラデーション 背景をつくる9パーツは、それぞれ単体でも格子にまとめました。並び順は人気順ではなく、訪問者が実際に画面を追う流れ（目を引き→機能を見て→価格を確認し→口コミで信じ→最後に押す）のとおりです。同じ柔らかさを塊として彫ればクレイモーフィズムのLPキットになり、逆に境界を鋭く立てればネオブルータリズムのLPパーツが向かい側に立ちます。

動くオーブ背景ヒーロー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つの塊が奥で漂う

ぼかした色の塊3つが見出しの奥でそれぞれ違うリズムで漂い、重なり合います。

動くオーブ背景ヒーロー
新しいタブで開く

01 · 動くオーブ背景ヒーロー — 計測 累積面積 38.218% · 動いたフレーム 18/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

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ナビゲーション

ほぼ透明な背景

メニューの背景はほぼ透明で、内側に薄いインク色のガラス層が一枚あるだけです。

透明ナビ
新しいタブで開く

02 · 透明ナビ — 計測 累積面積 3.459% · 動いたフレーム 15/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

backdrop-filter: blurtranslateXborder 반투명

三等分で移動させる

現在地を示すピルは、3項目ぶんの幅を均等な割合で三等分し、その分だけ移動します。

.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色の縞模様を見せ、その縞を流し続けます。

グラデーション枠カード
新しいタブで開く

03 · グラデーション枠カード — 計測 累積面積 2.081% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

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つ置き、バッジの中のグラデーションだけを左右に流します。

グラデーションアイコンリスト
新しいタブで開く

04 · グラデーションアイコンリスト — 計測 累積面積 1.75% · 動いたフレーム 19/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

background-size 200%background-positionradius pill

行全体を動かさない理由

行全体が動くと騒がしくなりますが、小さな点が1つ流れるだけなら視線を自然に引き留められます。

.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料金

おすすめだけが呼吸する

おすすめプランのカードだけ、オーロラのグラデーションが呼吸するように明るくなったり暗くなったりし、位置も少しずれます。

強調プランのグラデーション
新しいタブで開く

05 · 強調プランのグラデーション — 計測 累積面積 15.09% · 動いたフレーム 6/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

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つ

半透明でガラス質の引用カードの奥で、ぼかしたオーロラの塊が2つゆっくり漂います。

ぼかし背景引用
新しいタブで開く

06 · ぼかし背景引用 — 計測 累積面積 45.86% · 動いたフレーム 6/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

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色が流れ続け、その上に静止したグレインを重ねて印刷物のような質感にします。

全面オーロラ帯
新しいタブで開く

07 · 全面オーロラ帯 — 計測 累積面積 36.246% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

background-position 애니메이션mix-blend-mode: overlayradius card

面積は9パーツ中3番目

帯全体が動く被写体なので、変化したピクセルの面積は9パーツ中3番目に広い項目です。

.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フッター

グレイン テクスチャがチラつく理由

フィルムグレインをフレームごとに違う位置へジャンプさせ、チラつく質感をつくります。

グレインダークフッター
新しいタブで開く

08 · グレインダークフッター — 計測 累積面積 0.78% · 動いたフレーム 17/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

steps() 그레인background-position 랜덤칸 배경 5%

steps() が要になる

なめらかな曲線の代わりにsteps()を使うのが要で、この項目だけグレイン自体がアニメーションの主役です。

.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グローを常時ほのかに光らせます。

グラデーションボタン・グローフォーカス
新しいタブで開く

09 · グラデーションボタン・グローフォーカス — 計測 累積面積 2.579% · 動いたフレーム 20/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

background-position 호버box-shadow 이중 글로우radius control

撮影時は強制再生

9パーツの中で唯一ホバーで発動する項目なので、撮影時はis-demoクラスで強制的に再生させました。

.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ドキュメントが定義するメディアクエリで包んであり、動きを減らす設定を有効にした訪問者には静止したグラデーションと静止したグレインだけが見えます。

旧Safariへの併記

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に変えると同程度の質感を保てます。同じ光を金属の質感へ寄せると、Y2Kのクロム・ホログラフィックLPの輝く面の処理になります。

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

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