グラデーション背景CSSサンプル集

この記事では、Webサイトやブログ記事のセクション背景に使える、美しいグラデーション背景CSSを10種類紹介します。
すべて1行ずつコメント付きで、柔らかい青系・ピンク・オレンジ・グレー・肌色・茶色・グリーン・紫・ゴールド・ミントなど、トーンの異なる配色を揃えました。

1 実装のポイント

• linear-gradient()を使用し、2色で自然なグラデーションを表現
• 角度（135deg）を固定して統一感を持たせる
• 明るいトーンと濃いトーンを組み合わせて奥行きを出す

2 使い方

以下のように、任意のセクションやボックスに適用します。

<section class="gradient-box">
   <p>ここに本文が入ります。背景にグラデーションが適用されます。</p>
</section>
    

3 左（薄）から右（濃）のグラデーション

/* -------------------------------------------
 * 柔らかい青系グラデーション
 * ----------------------------------------- */
.gradient-box{
    background: linear-gradient(135deg, #f9fcff, #eef7ff); /* 柔らかく清潔感のある青 */
    height:100px; /* グラデーションの高さ */
    padding:10px; /* グラデーション内の距離 */
}

/* -------------------------------------------
 * ピンク系グラデーション
 * ----------------------------------------- */
.gradient-box{	
    background: linear-gradient(135deg, #ffe6f2, #ffd6eb); /* 可愛らしく女性的な印象 */
    height:100px; /* グラデーションの高さ */
    padding:10px; /* グラデーション内の距離 */
}

/* -------------------------------------------
 * オレンジ系グラデーション
 * ----------------------------------------- */
.gradient-box{
    background: linear-gradient(135deg, #fff2e0, #ffd1a1); /* 温かく活発な印象 */
    height:100px; /* グラデーションの高さ */
    padding:10px; /* グラデーション内の距離 */
}

/* -------------------------------------------
 * グレー系グラデーション
 * ----------------------------------------- */
.gradient-box{
    background: linear-gradient(135deg, #f4f4f4, #dcdcdc); /* モダンで落ち着いた印象 */
    height:100px; /* グラデーションの高さ */
    padding:10px; /* グラデーション内の距離 */
}

/* -------------------------------------------
 * 肌色（ベージュ）系グラデーション
 * ----------------------------------------- */
.gradient-box{
    background: linear-gradient(135deg, #fff5eb, #fde3c8); /* 柔らかくナチュラルな印象 */
    height:100px; /* グラデーションの高さ */
    padding:10px; /* グラデーション内の距離 */
}

/* -------------------------------------------
 * 茶色系グラデーション
 * ----------------------------------------- */
.gradient-box{
    background: linear-gradient(135deg, #f8ede3, #d7bfa6); /* カフェのような温もり感 */
    height:100px; /* グラデーションの高さ */
    padding:10px; /* グラデーション内の距離 */
}

/* -------------------------------------------
 * グリーン系グラデーション
 * ----------------------------------------- */
.gradient-box{
    background: linear-gradient(135deg, #e9fdf0, #b7eac8); /* 爽やかでリラックス効果 */
    height:100px; /* グラデーションの高さ */
    padding:10px; /* グラデーション内の距離 */
}

/* -------------------------------------------
 * 紫系グラデーション
 * ----------------------------------------- */
.gradient-box{
    background: linear-gradient(135deg, #f3e8ff, #d6b3ff); /* 高級感と優雅さを表現 */
    height:100px; /* グラデーションの高さ */
    padding:10px; /* グラデーション内の距離 */
}

/* -------------------------------------------
 * ゴールド系グラデーション
 * ----------------------------------------- */
.gradient-box{
    background: linear-gradient(135deg, #fff9e5, #fce29f); /* 優雅で上品な印象 */
    height:100px; /* グラデーションの高さ */
    padding:10px; /* グラデーション内の距離 */
}

/* -------------------------------------------
 * ミント系グラデーション
 * ----------------------------------------- */
.gradient-box{
    background: linear-gradient(135deg, #e8fff7, #c6f7e2); /* 爽やかで清涼感のある印象 */
    height:100px; /* グラデーションの高さ */
    padding:10px; /* グラデーション内の距離 */
}

4 上（薄）から下（濃）のグラデーション

/* -------------------------------------------
 * 柔らかい青系グラデーション
 * ----------------------------------------- */
.gradient-box{
    background: linear-gradient(to bottom, #f9fcff, #eef7ff); /* 柔らかく清潔感のある青 */
    height:100px; /* グラデーションの高さ */
    padding:10px; /* グラデーション内の距離 */
}

/* -------------------------------------------
 * ピンク系グラデーション
 * ----------------------------------------- */
.gradient-box{	
    background: linear-gradient(to bottom, #ffeaf5, #ffd4eb); /* 可愛らしく女性的な印象 */
    height:100px; /* グラデーションの高さ */
    padding:10px; /* グラデーション内の距離 */
}

/* -------------------------------------------
 * オレンジ系グラデーション
 * ----------------------------------------- */
.gradient-box{
    background: linear-gradient(to bottom, #fff5e6, #ffd4a3); /* 温かく活発な印象 */
    height:100px; /* グラデーションの高さ */
    padding:10px; /* グラデーション内の距離 */
}

/* -------------------------------------------
 * グレー系グラデーション
 * ----------------------------------------- */
.gradient-box{
    background: linear-gradient(to bottom, #f5f5f5, #e1e1e1); /* モダンで落ち着いた印象 */
    height:100px; /* グラデーションの高さ */
    padding:10px; /* グラデーション内の距離 */
}

/* -------------------------------------------
 * 肌色（ベージュ）系グラデーション
 * ----------------------------------------- */
.gradient-box{
    background: linear-gradient(to bottom, #fff6eb, #fde5c9); /* 柔らかくナチュラルな印象 */
    height:100px; /* グラデーションの高さ */
    padding:10px; /* グラデーション内の距離 */
}

/* -------------------------------------------
 * 茶色系グラデーション
 * ----------------------------------------- */
.gradient-box{
    background: linear-gradient(to bottom, #f8eee5, #d8bda2); /* カフェのような温もり感 */
    height:100px; /* グラデーションの高さ */
    padding:10px; /* グラデーション内の距離 */
}

/* -------------------------------------------
 * グリーン系グラデーション
 * ----------------------------------------- */
.gradient-box{
    background: linear-gradient(to bottom, #e9fdf0, #b7eac8); /* 爽やかでリラックス効果 */
    height:100px; /* グラデーションの高さ */
    padding:10px; /* グラデーション内の距離 */
}

/* -------------------------------------------
 * 紫系グラデーション
 * ----------------------------------------- */
.gradient-box{
    background: linear-gradient(to bottom, #f3e8ff, #d6b3ff); /* 高級感と優雅さを表現 */
    height:100px; /* グラデーションの高さ */
    padding:10px; /* グラデーション内の距離 */
}

/* -------------------------------------------
 * ゴールド系グラデーション
 * ----------------------------------------- */
.gradient-box{
    background: linear-gradient(to bottom, #fff9e5, #fce29f); /* 優雅で上品な印象 */
    height:100px; /* グラデーションの高さ */
    padding:10px; /* グラデーション内の距離 */
}

/* -------------------------------------------
 * ミント系グラデーション
 * ----------------------------------------- */
.gradient-box{
    background: linear-gradient(to bottom, #e8fff7, #b9f1d6); /* 爽やかで清涼感のある印象 */
    height:100px; /* グラデーションの高さ */
    padding:10px; /* グラデーション内の距離 */
}

5 完成イメージ

5.1 左（薄）から右（濃）のグラデーション

5.2 上（薄）から下（濃）のグラデーション

6 まとめ

• 10種類の色系統でグラデーションを簡単に適用可能
• テーマカラーに合わせて背景色を選ぶだけでデザイン性UP
• 見出しセクションやCTA・プロフィールボックスにも最適