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

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

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

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

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

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

Mesh Gradient — CSS Effect with AI Prompt

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%; } }

AI PROMPT

Claude 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でゆっくり動かす。

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 UIデザインの心理学 ―わかりやすさ・使いやすさの法則 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

メッシュグラデーション（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だけで完結するため、読み込みが軽く保守も簡単という利点があります。