背景デザインは、セクションの印象や読みやすさを大きく変えるCSSです。
この記事では、CSSだけで作れる背景デザインを20個まとめました。グラデーション、斜め背景、ドット柄、ストライプ、分割背景など、Webサイトのセクションにコピーして使いやすい例を紹介します。
1. シンプルな単色背景
まずは余白と背景色だけの基本形です。
<section class="bg-solid">
<h2>見出し</h2>
<p>本文が入ります。</p>
</section>.bg-solid {
padding: 64px 24px;
background: #f8fafc;
}本文セクションでは、薄い背景色から始めると失敗しにくいです。
2. 濃いグラデーション背景
ヒーローやCTAで使いやすい、濃い色のグラデーションです。
.bg-gradient-strong {
padding: 72px 24px;
color: #fff;
background: linear-gradient(135deg, #2563eb, #0f766e);
}濃い背景では、文字色を白にしてコントラストを確保します。
3. 薄いグラデーション背景
本文中のセクションには、薄いグラデーションが使いやすいです。
.bg-gradient-soft {
padding: 64px 24px;
background: linear-gradient(135deg, #eff6ff, #ecfdf5);
}背景が薄いと、本文やカードを置いても読みやすくなります。
4. 横方向のグラデーション背景
左右に色が変わる背景です。
.bg-gradient-x {
padding: 64px 24px;
background: linear-gradient(90deg, #dbeafe, #f0fdfa);
}横長の帯やフッター前のセクションに使いやすい形です。
5. 円形グラデーション背景
中央から外側に色が広がる背景です。
.bg-radial {
padding: 72px 24px;
background: radial-gradient(circle at center, #dbeafe, #ffffff 70%);
}全体を淡く見せたいときに使いやすいです。
6. 斜め背景
セクションの背景を斜めに見せたい場合は、疑似要素を使います。
.bg-diagonal {
position: relative;
padding: 80px 24px;
overflow: hidden;
}
.bg-diagonal::before {
position: absolute;
inset: 0;
z-index: -1;
content: "";
background: #eff6ff;
transform: skewY(-4deg);
transform-origin: top left;
}文字や中身まで斜めにしたくないので、背景だけを疑似要素にします。
7. clip-pathで斜めに切る背景
背景自体を斜めに切る方法です。
.bg-clip-diagonal {
padding: 80px 24px;
color: #fff;
background: #2563eb;
clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 92%);
}上下の余白が削られて見えるため、少し広めに余白を取ります。
8. ドット柄の背景
小さなドット柄は、radial-gradient で作れます。
.bg-dot {
padding: 64px 24px;
background-color: #fff;
background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
background-size: 20px 20px;
}ドットの色は薄くすると、本文の邪魔になりにくいです。
9. グリッド線の背景
薄い方眼紙のような背景です。
.bg-grid {
padding: 64px 24px;
background-color: #fff;
background-image:
linear-gradient(#e5e7eb 1px, transparent 1px),
linear-gradient(90deg, #e5e7eb 1px, transparent 1px);
background-size: 24px 24px;
}ツール系や技術系のセクションに合いやすい背景です。
10. 斜めストライプ背景
repeating-linear-gradient でストライプを作ります。
.bg-stripe {
padding: 64px 24px;
background: repeating-linear-gradient(
45deg,
#f8fafc,
#f8fafc 10px,
#eef2ff 10px,
#eef2ff 20px
);
}強いストライプは読みにくくなるため、薄い色で作ります。
11. 横ストライプ背景
横方向の細いストライプです。
.bg-stripe-horizontal {
padding: 64px 24px;
background: repeating-linear-gradient(
0deg,
#ffffff,
#ffffff 12px,
#f8fafc 12px,
#f8fafc 24px
);
}表や補足エリアの背景としても使えます。
12. チェック柄の背景
小さなチェック柄をCSSだけで作る例です。
.bg-check {
padding: 64px 24px;
background-color: #fff;
background-image:
linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
background-size: 20px 20px;
}柄背景は薄い色で使うと、装飾としてなじみます。
13. 上下で色を分ける背景
上半分と下半分で背景色を分ける方法です。
.bg-split {
padding: 64px 24px;
background: linear-gradient(
to bottom,
#eff6ff 0%,
#eff6ff 50%,
#ffffff 50%,
#ffffff 100%
);
}カードを背景の境目に重ねるデザインで使いやすいです。
14. 左右で色を分ける背景
左右にエリアを分けて見せたい場合の背景です。
.bg-split-x {
padding: 64px 24px;
background: linear-gradient(
90deg,
#f8fafc 0%,
#f8fafc 50%,
#ffffff 50%,
#ffffff 100%
);
}2カラムのセクションで左右の印象を変えたいときに使えます。
15. 背景画像に暗いレイヤーを重ねる
背景画像の上に文字を置く場合は、暗いレイヤーを重ねます。
.bg-image-dark {
padding: 80px 24px;
color: #fff;
background:
linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
url("https://placehold.co/1200x600") center / cover;
}画像上の文字は、CSS画像の上に文字を重ねる方法 と関連します。
16. 背景を固定する
背景画像をスクロールに対して固定する方法です。
.bg-fixed {
padding: 96px 24px;
color: #fff;
background:
linear-gradient(rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.55)),
url("https://placehold.co/1200x600") center / cover fixed;
}スマホでは見え方が安定しない場合があるため、実機で確認します。
17. 角丸の背景パネル
セクション内の一部だけ背景を敷くパネル型です。
<div class="bg-panel">
<h2>パネル見出し</h2>
<p>説明文が入ります。</p>
</div>.bg-panel {
padding: 32px;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 8px;
}カードほど強く見せたくない補足エリアに使いやすいです。
18. 下線だけ色を付ける背景
セクション全体ではなく、下側にだけ色を入れる方法です。
.bg-bottom-line {
padding: 64px 24px;
background:
linear-gradient(to top, #dbeafe 0 28%, transparent 28% 100%);
}見出しやカードを軽く強調したいときに使えます。
19. CSS変数で色を変えやすい背景
背景色や余白を変数にすると、使い回しやすくなります。
.bg-variable {
--bg-main: #eff6ff;
--bg-accent: #ecfdf5;
--bg-space: 64px;
padding: var(--bg-space) 24px;
background: linear-gradient(135deg, var(--bg-main), var(--bg-accent));
}ページごとに色を変える場合は、変数だけ上書きします。
20. 背景デザインの最小テンプレート
最後に、本文セクションで使いやすい最小セットです。
<section class="bg-template">
<div>
<h2>見出し</h2>
<p>本文が入ります。</p>
</div>
</section>.bg-template {
padding: 64px 20px;
background: linear-gradient(135deg, #f8fafc, #eff6ff);
}
.bg-template > div {
max-width: 960px;
margin: 0 auto;
}背景、余白、最大幅をセットにした、使い回しやすい形です。
背景デザインで失敗しやすいポイント
- 背景が強すぎて文字が読みにくい
- 柄を複数重ねすぎて画面がうるさくなる
- スマホで余白が広すぎる、または狭すぎる
- 重要な情報を背景画像だけに入れている
- 濃い背景なのに文字色やリンク色のコントラストが低い
まとめ
CSS背景デザインは、単色、グラデーション、斜め背景、ドット、ストライプを使い分けると表現の幅が広がります。
本文セクションでは薄い背景、ヒーローやCTAでは濃い背景、装飾したい部分ではドットやストライプなど、読みやすさを優先して選ぶのが大切です。