グラデメッシュ背景ヒーロー
複数の放射状グラデーションを重ねて、紫・ピンク・青がにじみ合うメッシュ風の背景を作ったヒーローです。背景は画像を使わず radial-gradient を at 20% 30% のように位置指定で何枚も重ね、最後にベースの濃紺を敷くことで色のムラを表現しています。画像を読み込まないため軽く、表示も速いのが利点です。
このパーツの使いどころと実装ポイント
複数の放射状グラデーションを重ねて、紫・ピンク・青がにじみ合うメッシュ風の背景を作ったヒーローです。背景は画像を使わず radial-gradient を at 20% 30% のように位置指定で何枚も重ね、最後にベースの濃紺を敷くことで色のムラを表現しています。画像を読み込まないため軽く、表示も速いのが利点です。
向いている場面
- スタートアップや SaaS のサービス紹介トップ
- テック系・クリエイティブ系の事業サイト
- キャンペーンや新機能の告知ページ
見出しは白抜き、丸い border-radius:9999px の CTA ボタンを白で置いて視線を集めます。色味は radial-gradient の各色を差し替えるだけで世界観を変えられ、ブランドカラーに合わせた配色に調整しやすい構造です。
実装上の注意
背景が多色なので、白文字とのコントラストが落ちる部分が出ないか確認してください。明るい色が広い場合は本文に薄い影を足すと読みやすくなります。@media で見出しサイズを縮める指定が入っており、スマートフォンでも収まりますが、CTA ボタンはタップしやすい高さ（44px 以上）を保つと操作性が上がります。
よくある質問
背景の色をブランドカラーに変えたいです。
radial-gradientで指定している各色コードを差し替えるだけで変更できます。隣り合う色の明度差を付けすぎると境界が目立つので、近い系統の2〜3色をにじませると自然なメッシュになります。
背景画像を使わなくて見栄えは問題ありませんか。
問題ありません。むしろ画像を読み込まない分だけ表示が速く、どんな画面幅でも破綻しない利点があります。質感を足したい場合は薄いノイズや粒子をCSSで重ねると単調さを抑えられます。