Как сделать градиент фон в html

Также в дополнение.

1. Цвет градиента может быть не только плавно переходящие цвета, но и с резким остановки цвета. Для этого используется так называемые точки остановки градиента.

**Пример **

background:
    linear-gradient(
      #4158d0 0%,
      #4158d0 40%,
      #c850c0 40%,
      #c850c0 90%,
      #ffcc70 90%,
      #ffcc70 100%
    );

Можно указывать точки остановки не только в %, но и в px.

2. Также градиент можно поворачивать.

Пример

Данное значение указывается в начале перед градиентов

background:
    linear-gradient(
      45deg,
      #4158d0 0%,
      #4158d0 40%,
      #c850c0 40%,
      #c850c0 90%,
      #ffcc70 90%,
      #ffcc70 100%
    );

3. Часто при градиенте с точкой остановки цвета повторяется. И чтобы каждый раз их не повторять есть

repeating-linear-gradient()

Для создания градиента фона в HTML можно использовать CSS свойство background-image.

Пример:

<div style="background-image: linear-gradient(to bottom, #ffffff, #000000);">
  <!-- Контент элемента -->
</div>

В данном примере создается градиент от белого (#ffffff) к черному (#000000) по вертикали (to bottom).

Также можно использовать другие направления градиента, например, to right для горизонтального градиента.

Для создания радиального градиента можно использовать функцию radial-gradient().

Пример:

<div style="background-image: radial-gradient(circle, #ffffff, #000000);">
  <!-- Контент элемента -->
</div>

В данном примере создается радиальный градиент от белого (#ffffff) к черному (#000000) с центром в центре элемента (circle).

Также можно задавать несколько цветов для создания более сложных градиентов.

Пример:

<div
  style="background-image: linear-gradient(to bottom, #ffffff, #ff0000, #000000);"
>
  <!-- Контент элемента -->
</div>

В данном примере создается градиент от белого (#ffffff) к красному (#ff0000) к черному (#000000) по вертикали.

Чтобы создать градиентный фон в HTML, мы используем CSS. Основной способ - это использование свойства background с функцией linear-gradient(). Например:

<style>
body {
  background: linear-gradient(to right, #ff0000, #0000ff);
}
</style>

Здесь мы задаем линейный градиент, который идет слева направо (параметр to right), начинаясь с красного цвета (#ff0000) и заканчиваясь синим (#0000ff).

Можно изменять напрвление градиента, используя ключевые слова to top, to bottom, to left, to right или задавая угол в градусах.

Также существуют радиальные градиенты, которые расходятся из центра:

<style>
body {
  background: radial-gradient(circle, #ff0000, #0000ff);
}
</style>

Градиенты можно применять не только к body, но и к любому другому элементу HTML.

Также важно помнить, что градиенты поддерживаются не во всех старых браузерах, поэтому рекомендуется указывать резервный цвет:

<style>
body {
  background: #ff0000; /* Резервный цвет */
  background: linear-gradient(to right, #ff0000, #0000ff);
}
</style>

Градиент задают в CSS через свойство background и функцию linear-gradient():

<style>
  body {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(to right, #6a11cb, #2575fc);
  }
</style>

Цвета перечисляют через запятую. Направление указывают первым аргументом.

Направление и угол

background: linear-gradient(to bottom, #fff, #000);       /* сверху вниз, по умолчанию */
background: linear-gradient(to right, #fff, #000);        /* слева направо */
background: linear-gradient(to bottom right, #fff, #000); /* по диагонали */
background: linear-gradient(45deg, #fff, #000);           /* под углом */

0deg ведёт градиент снизу вверх, 90deg — слева направо.

Несколько цветов и точки остановки

background: linear-gradient(to right, red, yellow, green);
background: linear-gradient(to right, red 0%, yellow 30%, green 100%);

Процент после цвета показывает, где цвет достигает полной силы.

Резкая граница без перехода

Если у двух цветов одна точка остановки, переход исчезает:

background: linear-gradient(to right, #ff5f6d 50%, #ffc371 50%);

Так делают полосы и двухцветный фон.

Почему градиент на body повторяется полосами

Если у body нет высоты, браузер растягивает градиент на высоту контента и повторяет его. Помогают min-height: 100vh у body или фиксация фона:

html {
  min-height: 100%;
}

body {
  background: linear-gradient(#e0eafc, #cfdef3);
  background-attachment: fixed;
}

Круговой и конический градиент

background: radial-gradient(circle, #fff, #4a90e2);        /* из центра к краям */
background: radial-gradient(circle at top left, #fff, #4a90e2);
background: conic-gradient(red, yellow, green, red);       /* по кругу, как диаграмма */

Повторяющийся градиент

background: repeating-linear-gradient(45deg, #eee 0 10px, #ddd 10px 20px);

Получаются диагональные полосы.

Градиент с прозрачностью поверх картинки

.hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)),
    url('photo.jpg') center / cover;
}

Первый слой лежит сверху. Так затемняют фото, чтобы текст на нём читался.

Градиентный текст

h1 {
  background: linear-gradient(to right, #f12711, #f5af19);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Запасной цвет

Перед градиентом можно указать сплошной цвет. Его увидят, если градиент не загрузится или блок попадёт в режим высокой контрастности:

background: #2575fc;
background: linear-gradient(to right, #6a11cb, #2575fc);

Фоны, цвета и блочную модель разбирают в бесплатном курсе «Основы HTML и CSS».