Урок 60 із 104
58%
← Назад

Повторюваний лінійний градієнт у CSS

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

Що таке repeating-linear-gradient()

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

За допомогою repeating-linear-gradient() можна створювати повторювані смуги, лінії та різні декоративні фонові візерунки без використання зображень.

Базовий синтаксис

.element { background-image: repeating-linear-gradient( red, blue 50px ); },

Перший колір починається з початку градієнта, а другий займає положення до 50px. Після завершення цього відрізка градієнт повторюється.

Повторювані смуги

Якщо сусіднім кольорам задати однакові точки переходу, можна отримати чіткі кольорові смуги без плавного переходу.

.element { background-image: repeating-linear-gradient( red 0, red 20px, blue 20px, blue 40px ); },

Напрямок градієнта

Напрямок повторюваного градієнта можна змінити за допомогою ключових слів to right, to left, to bottom, to top та інших напрямків.

.element { background-image: repeating-linear-gradient( to right, red 0, red 20px, blue 20px, blue 40px ); },

Градієнт під кутом

Напрямок можна задавати не тільки словами, а й кутом у градусах. Наприклад, 45deg створює діагональний напрямок.

.element { background-image: repeating-linear-gradient( 45deg, red 0, red 20px, blue 20px, blue 40px ); },

Кілька кольорів

У повторюваному градієнті можна використовувати три і більше кольорів. Кожному кольору можна задати власну позицію.

.element { background-image: repeating-linear-gradient( red 0, red 20px, yellow 20px, yellow 40px, blue 40px, blue 60px ); },

Плавний повторюваний градієнт

repeating-linear-gradient() також дозволяє створювати плавні переходи між кольорами. Для цього кольори розташовують на різних позиціях без однакових точок переходу.

.element { background-image: repeating-linear-gradient( 90deg, red, yellow 30px, blue 60px ); },

Практичне завдання

📌 Завдання:
  1. Створіть блок шириною 300px і висотою 200px.
  2. Створіть повторюваний градієнт із червоних і синіх горизонтальних смуг.
  3. Зробіть повторювані вертикальні смуги за допомогою напрямку to right.
  4. Створіть діагональні смуги під кутом 45deg.
  5. Задайте ширину червоної та синьої смуги по 20px.
  6. Створіть повторюваний градієнт із трьох кольорів: red, yellow та blue.
  7. Створіть плавний повторюваний градієнт із трьох кольорів.
<!-- Початковий код -->

<div class="box"></div>
💡 Показати підказку

Використовуйте repeating-linear-gradient(). Для чітких смуг задавайте однаковий колір на початковій та кінцевій позиціях, наприклад red 0, red 20px.

✅ Показати відповідь
.box { width: 300px; height: 200px; background-image: repeating-linear-gradient( 45deg, red 0, red 20px, yellow 20px, yellow 40px, blue 40px, blue 60px ); }