CSS linear-gradient() — лінійний градієнт

Опис

правити

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

правити

Порада

Додавайте багато кольорових зупинок, щоб створити складніші градієнти з багатьма переходами.

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

Порада

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

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

Нотатка

Використовуйте linear-gradient() для створення плавних кольорових переходів на елементах.

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

Нотатка

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

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

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

Синтаксис

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

Функція 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: linear-gradient(to right, red, blue);
}

.box.modified {
  background: linear-gradient(to right, blue, green);
}

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

.box {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, red, blue);
  transition: background 0.3s ease;
}

.box:hover {
  background: linear-gradient(to right, blue, green);
}

<div id="description">
  <h2>Чому градієнт не видно</h2>
  <p>Три блоки з однаковими кольорами. Різниця лише у властивості, у яку записано linear-gradient().</p>
</div>

<div id="result">
  <div class="demo">
    <div class="box wrong"></div>
    <p>background-color — порожньо</p>
  </div>
  <div class="demo">
    <div class="box right"></div>
    <p>background-image — працює</p>
  </div>
  <div class="demo">
    <div class="box hard"></div>
    <p>дві зупинки на 50% — різка межа</p>
  </div>
</div>

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

#result {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

.demo p {
  margin: 8px 0 0;
  font: 13px/1.4 Arial, sans-serif;
  text-align: center;
  color: #555;
}

.box {
  width: 150px;
  height: 150px;
  border: 1px dashed #999;
}

.wrong {
  background-color: linear-gradient(to right, #e11d48, #2563eb);
}

.right {
  background-image: linear-gradient(to right, #e11d48, #2563eb);
}

.hard {
  background-image: linear-gradient(to right, #e11d48 50%, #2563eb 50%);
}