CSS repeating-radial-gradient() — кільця градієнта

HTML

<div id="description">
  <h2>Приклад 2</h2>
  <p>Цей приклад демонструє два однакових елементи з різними градієнтами.</p>
</div>

<div id="result">
  <div class="container">
    <div class="element example"></div>
    <div class="element changed"></div>
  </div>
</div>

CSS

#description {
  font-style: italic;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.element {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.example {
  background: repeating-radial-gradient(circle at center, red 0, blue, green 30px);
}

.changed {
  background: repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
}

HTML

<div id="description">
  <h2>Приклад 1</h2>
  <p>Цей приклад ілюструє зміну градієнта при взаємодії з елементом.</p>
</div>

<div id="result">
  <div class="container">
    <div class="element"></div>
  </div>
</div>

CSS

#description {
  font-style: italic;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.element {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 70%, #333, #333 10px, #eee 10px, #eee 20px);
  transition: background 0.3s ease;
}

.element:hover {
  background: repeating-radial-gradient(circle at 60%, #000, #666 10px, #888 15px, #aaa 25px);
}

HTML

<div class="row">
    <figure>
        <div class="box no-stops"></div>
        <figcaption>repeating-radial-gradient(circle, red, blue)</figcaption>
    </figure>
    <figure>
        <div class="box plain"></div>
        <figcaption>radial-gradient(circle, red, blue) — те саме</figcaption>
    </figure>
</div>

<div class="row">
    <figure>
        <div class="box rings"></div>
        <figcaption>… red 0 10px, blue 10px 20px — кільця</figcaption>
    </figure>
    <figure>
        <div class="box off"></div>
        <figcaption>circle at 25% 30% — центр зсунуто</figcaption>
    </figure>
    <figure>
        <div class="box seam"></div>
        <figcaption>шов: крайні кольори різні</figcaption>
    </figure>
    <figure>
        <div class="box smooth"></div>
        <figcaption>шва немає: перший колір повторено в кінці</figcaption>
    </figure>
</div>

CSS

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 18px;
}

figure {
    margin: 0;
    width: 150px;
}

figcaption {
    margin-top: 6px;
    color: #5a6472;
    font: 12px/1.35 ui-monospace, monospace;
}

.box {
    width: 150px;
    height: 150px;
    border: 1px solid #b9c6d8;
}

.no-stops {
    background: repeating-radial-gradient(circle, red, blue);
}

.plain {
    background: radial-gradient(circle, red, blue);
}

.rings {
    background: repeating-radial-gradient(circle, red 0 10px, blue 10px 20px);
}

.off {
    background: repeating-radial-gradient(circle at 25% 30%, #f2b134 0 8px, #2f6fd0 8px 16px);
}

.seam {
    background: repeating-radial-gradient(circle, #2f6fd0 0, #f2b134 24px);
}

.smooth {
    background: repeating-radial-gradient(circle, #2f6fd0 0, #f2b134 24px, #2f6fd0 48px);
}