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

repeating-radial-gradient()プロパティは、放射状に繰り返されるグラデーションを作成するために使用されます。色の間隔や形状を指定することで、繰り返しパターンを作成し、背景デザインを強調することができます。

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

• 形状（例: circle, ellipse） – グラデーションの形状を指定します。
• 位置（例: at center, at 50% 50%） – グラデーションの中心位置を指定します。
• 色（例: red, yellow, blue） – グラデーションに使用する色を指定します。
• 間隔（例: 20px, 40px） – 色が何ピクセルごとに繰り返されるかを指定します。

注意点や関連情報

repeating-radial-gradient()は、複数の色が規則的に繰り返される放射状のグラデーションを作成できます。
ただし、間隔が狭すぎると見た目が重くなるため、適切な間隔と色の組み合わせを使うことが推奨されます。

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

他のbackgroundプロパティとの競合

他のbackgroundプロパティ（例: background-colorやbackground-size）が設定されていると、repeating-radial-gradient()が正しく表示されない場合があります。backgroundの一括指定でグラデーションが上書きされることもあります。

対策: 他のbackgroundプロパティと競合しないように、backgroundを統一して設定します。例えば、background: repeating-radial-gradient(circle, red, blue 20px) no-repeat;のように指定します。

z-indexやpositionが影響している

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

対策: z-indexやpositionを確認し、必要に応じて要素の重なり順を調整します。例えば、position: relative;やz-index: 1;を使って、要素が他の要素の前に表示されるようにします。

共通する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-radial-gradient(circle, red, yellow 20px, blue 40px)

円形の繰り返しグラデーション。

HTMLコード

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

CSSコード

.css-sample-repeating-radial-gradient-default {
      background: repeating-radial-gradient(circle, red, yellow 20px, blue 40px);
    }
  

表示結果

repeating-radial-gradient(ellipse at center, #ff7f50, #1e90ff 30px, #4b0082 60px)

楕円形の繰り返しグラデーション。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-box css-sample-repeating-radial-gradient-ellipse">
        楕円形の繰り返しグラデーション</div>
    </div>
  

CSSコード

.css-sample-repeating-radial-gradient-ellipse {
      background: repeating-radial-gradient(ellipse at center, #ff7f50, #1e90ff 30px, #4b0082 60px);
    }
  

表示結果

repeating-radial-gradient(farthest-corner, green, lime 15px, cyan 30px)

遠いコーナーからのカスタム繰り返しグラデーション。

HTMLコード

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

CSSコード

.css-sample-repeating-radial-gradient-custom {
      background: repeating-radial-gradient(farthest-corner, green, lime 15px, cyan 30px);
    }
  

表示結果

まとめ

• repeating-radial-gradient()は、放射状のグラデーションが繰り返されるデザインを作成します。
• 円形や楕円形、繰り返しの間隔を調整して、パターンの細かさや色のバランスを自由に設定できます。
• 間隔が狭すぎると複雑になりすぎる可能性があるため、慎重に設定することが重要です。