Урок 59 із 104
57%
← Назад

Радіальний градієнт у CSS

Вивчаємо функцію radial-gradient() та створюємо плавні переходи кольорів, що розходяться від центральної точки.

Що таке radial-gradient()

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

Радіальний градієнт можна використовувати як фон для блоків, кнопок, карток та інших елементів.

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

.element { background-image: radial-gradient(red, blue); },

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

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

У radial-gradient() можна використовувати три і більше кольорів. Вони будуть поступово переходити один в один.

 .element { background-image: radial-gradient( red, yellow, blue ); },

Вказання форми градієнта

За замовчуванням форма радіального градієнта залежить від розмірів елемента. За допомогою ключових слів circle та ellipse можна явно вказати форму.

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

.ellipse {
background-image: radial-gradient(
ellipse,
red,
blue
);
},

Розмір градієнта

Можна керувати розміром градієнта за допомогою ключових слів closest-side, farthest-side, closest-corner та farthest-corner.

.element {
background-image: radial-gradient(
circle closest-side,
red,
blue
);
},
  • closest-side — градієнт доходить до найближчої сторони елемента.
  • farthest-side — градієнт доходить до найдальшої сторони.
  • closest-corner — градієнт доходить до найближчого кута.
  • farthest-corner — градієнт доходить до найдальшого кута.

Позиція градієнта

За замовчуванням центр радіального градієнта знаходиться в центрі елемента. За допомогою ключового слова at можна змінити його положення.

.element {
background-image: radial-gradient(
circle at top left,
red,
blue
);
},

Точне положення центру

Позицію можна задавати не тільки словами, а й координатами у відсотках або інших одиницях CSS.

.element {
background-image: radial-gradient(
circle at 30% 40%,
red,
blue
);
},

Позиції кольорів

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

.element {
background-image: radial-gradient(
red 10%,
yellow 40%,
blue 80%
);
},

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

📌 Завдання:
  1. Створіть блок шириною 300px і висотою 200px.
  2. Задайте йому радіальний градієнт від червоного до синього.
  3. Створіть градієнт із трьох кольорів: red, yellow, blue.
  4. Створіть круглий градієнт за допомогою circle.
  5. Перемістіть центр градієнта у верхній лівий кут.
  6. Задайте власні позиції для кольорів за допомогою відсотків.
  7. Створіть градієнт, центр якого знаходиться приблизно на 30% по горизонталі та 40% по вертикалі.
  8. Спробуйте різні значення closest-side, farthest-side, closest-corner та farthest-corner.
<!--Початковий код -- >

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

Для створення градієнта використовуйте background-image: radial-gradient(...). Починайте з двох кольорів, а потім поступово додавайте форму, позицію, розмір та позиції кольорових зупинок.

✅ Показати відповідь
.box { width: 300px; height: 200px; background-image: radial-gradient( circle at 30% 40%, red 10%, yellow 40%, blue 80% ); }