メッシュ風 Blob 背景
カラフルな円形の塊（Blob）を強くぼかして重ねた、近年のSaaS LPで定番のメッシュ風背景です。3つの div を position:absolute で配置し、それぞれに border-radius:50% で円を作り、 filter:blur(70px) で大きくにじませることで、色が溶け合う柔らかいグラデ…
解説
カラフルな円形の塊（Blob）を強くぼかして重ねた、近年のSaaS LPで定番のメッシュ風背景です。3つのdivをposition:absoluteで配置し、それぞれにborder-radius:50%で円を作り、filter:blur(70px)で大きくにじませることで、色が溶け合う柔らかいグラデーションが生まれます。
向いている場面
テック企業やSaaSのファーストビュー、機能紹介セクションの台紙、登録フォームの背景などに合います。親要素にoverflow:hiddenを効かせているので、画面外にはみ出したBlobもきれいに切り取られます。
- 各Blobの色（
#667eea等）を変えてブランドカラーに寄せる - 大きさと位置（
width/top/left）でメッシュの表情を変える opacityとぼかし量で色の濃さを調整
blurは描画コストがかかるため、Blobの数を増やしすぎないのがコツ。中央のテキストはposition:relativeで前面に置き、ぼかしの影響を受けないようにしています。
使用例・適したシーン
- ヒーロー背景
- セクション区切り
- フッター前装飾
よくある質問
Blobの色や配置はどう変えますか
各Blob（bg-mh__b1〜b3）の background でカラーを、width・height で大きさを、top・left・bottom・right で位置を指定しています。これらを書き換えればブランドに合った配色とレイアウトに調整できます。
ぼかしが多いと表示が重くなりませんか
blur は描画負荷が比較的高い処理です。Blobは3つ程度に抑え、極端に大きなぼかし量や多数の重ね合わせを避ければ、一般的な端末でも滑らかに表示できます。