CSSグラデーションの作り方・linear-gradient完全ガイド

CSSグラデーションは、画像を使わずにコードだけで美しい色の変化を表現できる強力な機能です。ボタン、背景、カードのデザインなど幅広い場面で活用できます。この記事では、linear-gradientとradial-gradientの構文と、実用的なグラデーション作成のコツを解説します。

CSSグラデーションとは

CSSグラデーションはbackground-imageプロパティで指定する画像の一種で、2つ以上の色の間で滑らかな色の遷移を生成します。主に3種類があります：

• linear-gradient：直線的（線形）なグラデーション
• radial-gradient：円形（放射状）のグラデーション
• conic-gradient：円錐形（回転）のグラデーション

linear-gradientの構文

/* 基本構文 */
background: linear-gradient(方向, 色1, 色2, ...);

/* 例：上から下へ青→緑 */
background: linear-gradient(to bottom, #3b82f6, #10b981);

/* 例：左から右へ赤→黄 */
background: linear-gradient(to right, #ef4444, #eab308);

/* 例：角度を指定（45度） */
background: linear-gradient(45deg, #8b5cf6, #ec4899);

方向・角度の指定方法

radial-gradientの構文

/* 基本構文 */
background: radial-gradient(形状, 色1, 色2, ...);

/* 例：円形グラデーション */
background: radial-gradient(circle, #3b82f6, #1e3a5f);

/* 例：楕円形（デフォルト） */
background: radial-gradient(ellipse, #fbbf24, #f59e0b, #d97706);

/* 例：中心位置を指定 */
background: radial-gradient(circle at 30% 70%, #8b5cf6, transparent);

色の位置指定（カラーストップ）

各色にパーセンテージや長さを指定して、色の変化タイミングを制御できます：

/* 色の変化位置を指定 */
background: linear-gradient(
    to right,
    #3b82f6 0%,    /* 左端は青 */
    #3b82f6 30%,   /* 30%まで青を維持 */
    #10b981 70%,   /* 70%で緑に */
    #10b981 100%   /* 右端まで緑 */
);

実用的なグラデーション例

よくある質問