CSSのlinear-gradientで線形グラデーションを作成し、背景デザインを豊かにする方法をわかりやすく解説

CSSのlinear-gradient()プロパティは、要素の背景に線形グラデーションを作成するために使用されます。複数の色を指定して、その間でスムーズな色の遷移を作ることができます。

linear-gradient()プロパティの値とその効果の一覧

方向（デフォルト: 0度） – グラデーションの方向を指定します。角度や方位を指定できます。
色の停止点 – グラデーション内の特定の色の位置を指定します。パーセンテージやピクセルで表します。
複数の色 – 複数の色を連続して指定し、複雑なグラデーションを作ることができます。

注意点や関連情報

linear-gradient()は、背景に適用されるプロパティで、ボーダーやテキストには適用できません。色の停止点を指定しない場合は、色が均等に分布されます。また、グラデーションの方向はデフォルトでは上から下ですが、角度を指定してカスタマイズできます。

linear-gradient()が効かない時の原因と対策

background-imageが指定されていない

linear-gradient()は通常、background-imageプロパティに使用されます。background-colorでは機能しません。
対策: background-imageを使用して、linear-gradient()を正しく指定してください。

複数の背景画像が競合している

他の背景画像が優先されて、linear-gradient()が表示されていない可能性があります。
対策: 複数の背景が設定されている場合、それぞれの順序を確認し、適切な順番で表示されるように調整します。

z-indexの設定が影響している

他の要素がz-indexによって重なり、linear-gradient()が表示されていない場合があります。
対策: z-indexが適切に設定されているか確認し、必要に応じてスタッキング順序を調整します。

共通するCSSコード

.css-sample-container {
      width: 100%;
      margin: 20px 0;
      text-align: center;
    }

    .css-sample-item {
      width: 300px;
      height: 150px;
      margin: 20px auto;
      line-height: 150px;
      font-size: 1.2em;
      color: #fff;
      text-align: center;
    }

linear-gradient(90deg, #ff7f50, #1e90ff)

デフォルトのグラデーション方向（水平）を使ったシンプルな線形グラデーションです。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-item css-sample-linear-gradient-default">
        Default Gradient
      </div>
    </div>

CSSコード

.css-sample-linear-gradient-default {
      background: linear-gradient(90deg, #ff7f50, #1e90ff);
    }

表示結果

Default Gradient

linear-gradient(45deg, #ff7f50, #1e90ff)

45度の角度を指定して斜めにグラデーションを適用しています。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-item css-sample-linear-gradient-angle">
        45 Degree Gradient
      </div>
    </div>

CSSコード

.css-sample-linear-gradient-angle {
      background: linear-gradient(45deg, #ff7f50, #1e90ff);
    }

表示結果

45 Degree Gradient

linear-gradient(to right, #ff7f50 30%, #1e90ff 70%)

色の停止点を指定し、より細かな制御を行ったグラデーションです。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-item css-sample-linear-gradient-color-stop">
        Gradient with Stops
      </div>
    </div>

CSSコード

.css-sample-linear-gradient-color-stop {
      background: linear-gradient(to right, #ff7f50 30%, #1e90ff 70%);
    }

表示結果

Gradient with Stops

linear-gradient(to right, #ff7f50, #ffa07a, #1e90ff)

複数の色を使用した複雑なグラデーションです。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-item css-sample-linear-gradient-multiple">
        Multi-color Gradient
      </div>
    </div>

CSSコード

.css-sample-linear-gradient-multiple {
      background: linear-gradient(to right, #ff7f50, #ffa07a, #1e90ff);
    }

表示結果

Multi-color Gradient

まとめ

linear-gradient()プロパティは、線形グラデーションを使って要素の背景をスタイリングします。
グラデーションの方向や色の停止点を指定することで、さまざまなデザイン効果が可能です。
グラデーションはデザインの一部として、視覚的なインパクトを強調するのに効果的です。