Mesh Gradient
ぼかしたグラデーションが動く背景エフェクトサンプルです。
概要
Mesh Gradient は複数の発光するカラーオブジェクトを重ねることで、 滑らかなグラデーション背景を表現するエフェクトです。 大きくぼかした円形グラデーションをゆっくり移動させることで、色が混ざり合い、動きのある背景を作り出しています。 下記を組み合わせています。
- 3色の発光オブジェクト
- 大きなブラー
- 位置アニメーション
- 透明度付きカラー
- Framer Motion使用
特徴
- モダンなWebデザインと相性が良い
- Hero背景に最適
- コード量が少ない
- Canvas不要
- Framer Motion使用
コードブロック
tsx
カスタマイズ
見出しの下に変更箇所のコードを載せています。
発光オブジェクト
各色は大きな円形要素で構成されています。
tsx
className="absolute rounded-full"ブラー処理
大きなブラーを適用することで境界を消しています。
tsx
blur-[140px]これによって色同士が自然に混ざります。
発光
ピンクの発光
左上からゆっくり移動します。
tsx
background: "rgba(236, 72, 153, 0.4)"青の発光
右側に配置しています。
tsx
background: "rgba(59, 130, 246, 0.4)"緑の発光
下部から背景全体を補完しています。
tsx
background: "rgba(34, 197, 94, 0.3)"アニメーション
各オブジェクトを別々の軌道で移動させています。
tsx
animate={{
x: [0, 180, -120, 0],
y: [0, 120, -80, 0],
}}
時間差演出
各色にdelayを設定しています。
tsx
delay: 1
delay: 2完全に同じ動きにならないため自然に見えます。
Hero背景やLPのファーストビュー、ポートフォリオサイトの背景演出におすすめです。
カスタマイズ
色変更
tsx
rgba(236, 72, 153, 0.4)
rgba(59, 130, 246, 0.4)
rgba(34, 197, 94, 0.3)tsx
//Purple
rgba(168, 85, 247, 0.4)
//Cyan
rgba(34, 211, 238, 0.4)
//Orange
rgba(249, 115, 22, 0.4)発光サイズ変更
tsx
w-[700px] h-[700px]小さくする
tsx
w-[500px] h-[500px]大きくする
tsx
w-[900px] h-[900px]ブラー量変更
tsx
blur-[140px]シャープにする
tsx
blur-[80px]より柔らかくする
tsx
blur-[200px]移動量変更
tsx
x: [0, 180, -120, 0]
y: [0, 120, -80, 0]動きを大きくする
tsx
x: [0, 300, -200, 0]
y: [0, 200, -150, 0]控えめにする
tsx
x: [0, 80, -50, 0]
y: [0, 50, -30, 0]アニメーション速度変更
tsx
duration: 8
duration: 7
duration: 6ゆっくり
tsx
duration: 12速く
tsx
duration: 4オブジェクト数追加
例えば黄色を追加できます。
tsx
<motion.div
className="absolute rounded-full w-[500px] h-[500px] blur-[140px]"
style={{
background: "rgba(250, 204, 21, 0.3)",
top: "40%",
left: "40%",
}}
/>
遅延時間変更
tsx
delay: 1
delay: 2発光ごとに遅延をずらすことで、より自然な動きになります。
tsx
delay: 0
delay: 2
delay: 4
delay: 6