【保存版】radial-gradient × linear-gradient を重ねた背景デザインの作り方
Webデザインにおいて「背景」は空気感を決める重要な要素です。
今回解説するのは、次のような background 指定です。
background:
radial-gradient(918px 535px at 877% 52%, rgba(255, 255, 255, 0.1), transparent 79%),
linear-gradient(180deg, #1c1c1c 0%, #0f0f0f 100%);
一見すると複雑に見えますが、実は
- 黒の縦グラデーション
- 右側から当たるうっすら光
を重ねているだけです。
この記事では、この背景の意味・仕組み・応用方法をわかりやすく解説します。
全体の構造を理解しよう
まずポイントは「カンマ」です。
radial-gradient(...),
linear-gradient(...)
background はカンマで区切ることで レイヤーを重ねる ことができます。
上から順番に描画されます。
つまりこのコードは：
- radial-gradient（光）
- linear-gradient（黒背景）
を重ねています。
linear-gradient の意味
linear-gradient(180deg, #1c1c1c 0%, #0f0f0f 100%)
分解すると
- 180deg → 上から下へ
- #1c1c1c → やや明るい黒
- #0f0f0f → より暗い黒
つまりこれは 黒の縦グラデーション背景 です。
なぜ単色ではなくグラデーションにするのか？
平坦にならず、奥行きが出るからです。
最近のLPやSaaS系サイトでは、ほぼこのパターンが使われています。
radial-gradient の意味
radial-gradient(918px 535px at 877% 52%, rgba(255,255,255,0.1), transparent 79%)
これがデザインのキモです。
① 918px 535px
楕円のサイズ（横918px × 縦535px）
② at 877% 52%
中心位置です。
通常は 0%〜100% ですが、877% になっています。
これはどういう意味かというと、
画面の外、かなり右側から光らせている
という意味です。
③ rgba(255,255,255,0.1)
白色・透明度10%
かなり薄い光です。
④ transparent 79%
79%地点で完全透明になります。
全体の見た目イメージ
右側からうっすら光が差し込む
＋
黒の縦グラデーション
結果：
- 高級感
- 立体感
- 奥行き
- モダンな印象
が生まれます。
なぜ中心を877%にするのか？
これが一番のテクニックです。
普通に 50% 50% にすると、中央が光ります。
しかし 877% にすると、
画面の外から光が当たる
演出になります。
これはUIデザインでよく使われる
- エッジライト
- サイドグロー
- ネオン効果
の一種です。
サンプルとして使える改良版
レスポンシブで使うなら、pxより%がおすすめです。
background:
radial-gradient(120% 80% at 100% 50%, rgba(255,255,255,0.08), transparent 70%),
linear-gradient(180deg, #1c1c1c 0%, #0f0f0f 100%);
これなら画面サイズに応じて自然に広がります。
よくある応用パターン
🔹 光を強くする
rgba(255,255,255,0.2)
🔹 青っぽくする
rgba(0,150,255,0.15)
🔹 金色系にする
rgba(255,215,0,0.15)
背景を縦いっぱいにする方法
忘れがちなのが高さ指定です。
body {
min-height: 100vh;
}これを入れないと途中で切れます。
このデザインが向いているジャンル
- AIサービスLP
- 金融系サイト
- 高級ブランド
- ITスタートアップ
- ポートフォリオサイト
特にダークテーマとの相性は抜群です。
まとめ
今回の background は、
✔ 黒の縦グラデーション
✔ 画面外から差し込む光
✔ レイヤー重ねテクニック
この3つで構成されています。
一見難しそうに見えますが、実は
グラデーションを2枚重ねているだけ
です。
しかしこの「ちょっとした光」があるだけで、
サイトの印象は大きく変わります。
デザインは装飾ではなく「空気づくり」。
ぜひ一度、サンプルとして試してみてください。
