CSS 반복 그라데이션 예제

반복 선형 그라데이션 (Repeating Linear Gradient)

CSS:

.repeating-linear-example {
  width: 300px;
  height: 150px;
  background-image: repeating-linear-gradient(
    45deg,
    #f0a, /* Magenta */
    #f0a 10px,
    #0ff /* Cyan */ 10px,
    #0ff 20px
  );
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

반복 방사형 그라데이션 (Repeating Radial Gradient)

CSS:

.repeating-radial-example {
  width: 300px;
  height: 150px;
  background-image: repeating-radial-gradient(
    circle,
    #0f0, /* Green */
    #0f0 25px,
    #ff0 /* Yellow */ 25px,
    #ff0 50px
  );
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

다층 반복 그라데이션 (Multi-layer Repeating Gradients)

CSS:

.multi-layer-example {
  width: 300px;
  height: 150px;
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(255, 165, 0, 0.4) 0, /* Orange transparent */
      rgba(255, 165, 0, 0.4) 10px,
      transparent 10px,
      transparent 20px
    ),
    repeating-radial-gradient(
      ellipse at center,
      rgba(128, 0, 128, 0.4) 0, /* Purple transparent */
      rgba(128, 0, 128, 0.4) 20px,
      transparent 20px,
      transparent 40px
    );
  border: 1px solid #ccc;
  margin-bottom: 20px;
}