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

Лінійний градієнт у CSS

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

Функція linear-gradient()

Лінійний градієнт дозволяє створити плавний перехід від одного кольору до іншого. У CSS він задається за допомогою функції linear-gradient(), яку найчастіше використовують для властивості background або background-image.

.box {

background-image: linear-gradient(red, blue);
}

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

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

/* Зверху вниз */

.box {
background-image: linear-gradient(to bottom, red, blue);
}

/* Зліва направо */
.box {
background-image: linear-gradient(to right, red, blue);
}

/* Справа наліво */
.box {
background-image: linear-gradient(to left, red, blue);
}

/* Знизу вгору */
.box {
background-image: linear-gradient(to top, red, blue);
}

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

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

.box {

background-image: linear-gradient(
45deg,
red,
blue
);
}

Градієнт із трьома кольорами

.box {

background-image: linear-gradient(
to right,
red,
yellow,
green
);
}

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

Контроль позиції кольорів

.box {

background-image: linear-gradient(
to right,
red 0%,
yellow 50%,
blue 100%
);
}

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

Градієнт як фон блока

.box {

width: 300px;
height: 200px;

background-image: linear-gradient(
135deg,
#2563eb,
#9333ea
);
}
❗ Важливо:

linear-gradient() створює зображення, тому його зазвичай використовують через background-image або background. Для суцільного кольору достатньо background-color.

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

📌 Завдання:
  1. №1. Створіть блок із градієнтом від червоного до синього зверху вниз.
  2. №2. Створіть градієнт від зеленого до жовтого зліва направо.
  3. №3. Створіть градієнт від чорного до білого справа наліво.
  4. №4. Створіть діагональний градієнт під кутом 45deg від синього до фіолетового.
  5. №5. Створіть градієнт із трьох кольорів: червоного, жовтого та зеленого.
  6. №6. Створіть градієнт зліва направо та задайте позиції кольорів: синій — 0%, білий — 50%, червоний — 100%.
<!-- Початковий код -->

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

Використовуйте linear-gradient(). Напрямок можна задати словами to right, to left, to top, to bottom або кутом у градусах.

✅ Показати відповідь
/* №1 */

.box {
background-image: linear-gradient(red, blue);
}

/* №2 */
.box {
background-image: linear-gradient(
to right,
green,
yellow
);
}

/* №3 */
.box {
background-image: linear-gradient(
to left,
black,
white
);
}

/* №4 */
.box {
background-image: linear-gradient(
45deg,
blue,
purple
);
}

/* №5 */
.box {
background-image: linear-gradient(
to right,
red,
yellow,
green
);
}

/* №6 */
.box {
background-image: linear-gradient(
to right,
blue 0%,
white 50%,
red 100%
);
}