Mesh Gradient CSS — 複数放射グラデを重ねた背景演出

CODE

HTML

<div class="demo-stage" style="padding:0"><div class="mg-box"><span>MESH</span></div></div>

CSS

.mg-box { min-height:280px; display:flex; align-items:center; justify-content:center; background-color:#1A1A1A; background-image:radial-gradient(at 20% 25%,#E91B89 0px,transparent 50%),radial-gradient(at 80% 20%,#7B37A8 0px,transparent 50%),radial-gradient(at 75% 80%,#5BAADE 0px,transparent 50%),radial-gradient(at 25% 78%,#7B37A8 0px,transparent 45%); background-size:200% 200%; animation:mg-move 14s ease-in-out infinite; }
.mg-box span { font-family:'Oswald',sans-serif; font-size:2.2rem; letter-spacing:.3em; color:#fff; }
@keyframes mg-move { 0%,100% { background-position:0% 0%; } 50% { background-position:100% 100%; } }
/* REDUCED-MOTION:v1 */
@media (prefers-reduced-motion: reduce) {
  .mg-box {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

AI PROMPT

Claude Code Cursor v0

PROMPT

メッシュグラデーション背景を作って。background-imageに複数のradial-gradient(at X% Y%, 色 0px, transparent 50%)を重ね、色（ピンク/紫/青）を四隅付近に配置。background-size:200%にしてbackground-positionを0%→100%へ14s ease-in-out infiniteでゆっくり動かす。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

メッシュグラデーション（Mesh Gradient）とは

複数の放射グラデーションを重ねた滑らかなメッシュグラデーション背景。トレンドのカラフルな質感に。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。

使いどころ

ヒーローセクションの背景・セクション区切り・装飾レイヤーなど、空気感づくりに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。

FAQ

メッシュグラデーション（Mesh Gradient）はどんな効果ですか？

複数の放射グラデーションを重ねた滑らかなメッシュグラデーション背景。トレンドのカラフルな質感に。ヒーローセクションの背景・セクション区切り・装飾レイヤーなど、空気感づくりに向く演出です。

Mesh GradientはCSSだけで実装できますか？

はい。JavaScriptを使わずCSSの@keyframesアニメーションとtransition／transformだけで実装できます。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

Mesh Gradient

RELATED EFFECTS

メッシュグラデーション（Mesh Gradient）とは

使いどころ

CSS実装のポイント

CSSとJavaScriptの違い

FAQ