CSS repeating-linear-gradient() — смуги градієнтом

Опис

Функція repeating-linear-gradient() в CSS використовується для створення повторюваного лінійного градієнта, що переходить від одного кольору до іншого у вигляді лінійного переходу. Ця функція дозволяє створювати повторювані градієнтні ефекти та налаштовувати вигляд ваших елементів на веб-сайті.

Функція repeating-linear-gradient() працює подібно до функції linear-gradient(), але з можливістю повторюваності градієнта. Вона приймає один або більше аргументів - кольорові зупинки, які визначають точки на лінійній формі, де кольори змінюються. Ви можете вказати кольори в різних форматах, таких як ключові слова, шістнадцяткові значення або RGB значення. Наприклад, repeating-linear-gradient(red, blue) створить повторюваний лінійний градієнт, що переходить від червоного до синього кольору.

Основна відмінність функції repeating-linear-gradient() від linear-gradient() полягає в тому, що градієнт повторюється безперервно, утворюючи покриваючий ефект. Це дозволяє створювати цікаві та естетичні градієнтні елементи, які повторюються на заданому просторі. Наприклад, ви можете використовувати repeating-linear-gradient() для створення фонового градієнта для великих секцій на вашому веб-сайті або для стилізації кнопок, де градієнт буде повторюватись безперервно.

Ось короткий приклад використання функції repeating-linear-gradient() для створення повторюваного градієнта:

div {
  background: repeating-linear-gradient(to right, red, blue);
}

Цей код застосовує повторюваний лінійний градієнт, що переходить від червоного до синього кольору, як фоновий ефект для елементу div.

правити

Загальний опис

правити

Порада

Використовуйте функцію repeating-linear-gradient() для створення повторюваних лінійних градієнтів на фоні елементів.

автор: Bond правити

Порада

Експериментуйте з різними комбінаціями кольорів та зупинками градієнта, щоб отримати бажаний вигляд градієнта.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

repeating-linear-gradient[<angle> | to <side-or-corner>]? <color-stop>[, <color-stop>]+)

Функція repeating-linear-gradient може отримувати 3 значень:

<angle>

Кут градієнта в градусах (deg), радіанах (rad), градах (grad) або тригонометричний термін.

автор: Bond

правити

<side-or-corner>

Напрямок градієнта, який може бути одним із значень: to top, to right, to bottom, to left, to top right, to top left, to bottom right, to bottom left.

автор: Bond

правити

<color-stop>

Колірна зупинка, що складається з кольору і опційного відсоткового значення, яке вказує, де починається цей колір на градієнті. Наприклад, red, blue 50%, green 20%.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	26	16	7	12.1	12	10

Підтримка: мобільні переглядачі

Переглядач
	4.4	26	16	7

Приклади

+ запропонувати свій приклад у пісочниці

<div id="description">
  <h2>Приклад 2: лінійний градієнт</h2>
  <p>Приклади використання градієнту для фонового кольору.</p>
</div>

<div id="result">
  <div class="box"></div>
  <div class="box modified"></div>
</div>

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

#result {
  display: flex;
  justify-content: space-around;
}

.box {
  width: 200px;
  height: 200px;
  background: repeating-linear-gradient(45deg, blue, red 33.3%);
}

.box.modified {
  background: repeating-linear-gradient(to left top, blue, red 20px);
}

<div id="description">
  <h2>Приклад 1</h2>
  <p>Наведіть курсор на квадрат, щоб побачити зміну градієнта.</p>
</div>
<div id="result">
  <div class="box"></div>
</div>

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

#result {
  display: flex;
  justify-content: center;
}

.box {
  width: 200px;
  height: 200px;
  background: repeating-linear-gradient(0deg, blue, green 40%, red);
  transition: background 0.3s ease;
}

.box:hover {
  background: repeating-linear-gradient(90deg, green, red 15%, yellow);
}

<div class="row">
    <div class="tile a"></div>
    <div class="tile b"></div>
    <div class="tile c"></div>
    <div class="tile d"></div>
</div>

<div class="row labels">
    <span>без позицій: повтору нема</span>
    <span>0 10px / 10px 20px</span>
    <span>плавно: видно шов</span>
    <span>дзеркально: шва нема</span>
</div>

body {
    font-family: sans-serif;
    font-size: 13px;
    padding: 24px;
}

.row {
    display: flex;
    gap: 14px;
}

.tile {
    width: 150px;
    height: 110px;
    border: 1px solid #cfd4d9;
}

.labels span {
    width: 152px;
    text-align: center;
}

.a {
    background-image: repeating-linear-gradient(45deg, #2f6f9f, #eaf1f7);
}

.b {
    background-image: repeating-linear-gradient(45deg, #2f6f9f 0 10px, #eaf1f7 10px 20px);
}

.c {
    background-image: repeating-linear-gradient(45deg, #2f6f9f 0, #eaf1f7 20px);
}

.d {
    background-image: repeating-linear-gradient(45deg, #2f6f9f 0, #eaf1f7 14px, #2f6f9f 28px);
}