CSSのrepeating-linear-gradientで線形グラデーションを繰り返しパターンとして作成する方法をわかりやすく解説

repeating-linear-gradient()プロパティは、指定した色やパターンが繰り返される直線的なグラデーションを作成するために使用されます。複数の色の間隔や方向を指定して、連続するデザインを作成できます。

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

• 角度（例: 45deg, 90deg） – グラデーションの角度を指定します。
• 色（例: red, yellow, blue） – グラデーションに使用する色を指定します。
• 位置（例: 10px, 20px） – 各色が何ピクセルごとに繰り返されるかを指定します。

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

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

repeating-linear-gradient()はbackground-imageプロパティ内で使用されます。background-colorや他のプロパティに使用しても効果がありません。

対策: repeating-linear-gradient()はbackground-imageプロパティ内で使用する必要があります。例えば、background-image: repeating-linear-gradient(to right, red, blue 10%);のように指定します。

z-indexやpositionの影響で他の要素に隠れている

repeating-linear-gradient()を適用した要素が他の要素に隠れている場合、視覚的にグラデーションが表示されないことがあります。z-indexやpositionプロパティによって要素が正しく表示されないことがあります。

対策: z-indexやpositionの設定を確認し、必要に応じて要素の重なり順序を調整します。たとえば、z-index: 1;を使用して要素を他の要素の前面に表示します。

注意点や関連情報

repeating-linear-gradient()を使うことで、同じパターンが無限に繰り返されるデザインが作れます。
ただし、複雑なパターンや狭い間隔を多用すると、視覚的に混乱を招く可能性があるので、慎重に使用することが大切です。

共通するCSSコード

.css-sample-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 80%;
      margin: 20px auto;
      padding: 20px;
      border: 2px solid #333;
      background-color: #f9f9f9;
    }

    .css-sample-box {
      width: 100%;
      height: 200px;
      margin: 20px 0;
      text-align: center;
      line-height: 200px;
      font-size: 20px;
      color: white;
      border: 1px solid #ccc;
    }
  

repeating-linear-gradient(45deg, red, yellow 10px, blue 20px)

45度の斜め方向に色が繰り返されるグラデーション。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-box css-sample-repeating-gradient-default">
        45度の繰り返しグラデーション</div>
    </div>
  

CSSコード

.css-sample-repeating-gradient-default {
      background: repeating-linear-gradient(45deg, red, yellow 10px, blue 20px);
    }
  

表示結果

repeating-linear-gradient(to right, red, yellow 10px, blue 20px)

水平に繰り返されるグラデーション。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-box css-sample-repeating-gradient-horizontal">
        水平方向の繰り返しグラデーション</div>
    </div>
  

CSSコード

.css-sample-repeating-gradient-horizontal {
      background: repeating-linear-gradient(to right, red, yellow 10px, blue 20px);
    }
  

表示結果

repeating-linear-gradient(90deg, #ff7f50, #1e90ff 15px, #4b0082 30px)

90度のカスタムグラデーション。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-box css-sample-repeating-gradient-custom">
        カスタムグラデーション</div>
    </div>
  

CSSコード

.css-sample-repeating-gradient-custom {
      background: repeating-linear-gradient(90deg, #ff7f50, #1e90ff 15px, #4b0082 30px);
    }
  

表示結果

まとめ

• repeating-linear-gradient()は、直線的なグラデーションが繰り返されるデザインを作成します。
• 角度や色、位置を調整して、パターンの細かさや色のバランスを自由にコントロールできます。
• 繰り返しの間隔が狭い場合、複雑なパターンが視覚的に混乱を招く可能性があります。