Вы ищете способ добавить немного цвета на свой сайт? С помощью всего нескольких строк CSS вы можете создать красивые градиентные фоны, которые выделят ваш сайт среди других. В этой статье мы покажем вам, как это сделать. К концу этой статьи вы сможете с легкостью создавать свои собственные градиентные фоны!

Навигация по статье

Свойство CSS для градиента

Чтобы задать градиент в качестве фона для вашего сайта, используем свойство background со значением linear-gradient:

background: linear-gradient(направление, цвета)

Здесь направление задается либо в градусах, либо ключевым словом. Например 90 градусов = 90deg.

Ключевые слова:

to top — вверх
to bottom — вниз
to right — вправо
to left — влево

Количество значений цветов может быть любым.

Задаем градиент блоку

Чтобы задать блоку фон градиентом в CSS:

.box {
  background: linear-gradient(45deg, #9890e3, #b1f4cf);
}

Получим:

Задаем градиент как фон сайта

Градиентный фон для сайта довольно красиво смотрится. Однако если задать, его также, как и для блока box, то градиент будет повторятся при скролле. Мы можем растянуть градиент на всю высоту веб-страницы, либо на высоту видимой области экрана.

Растянуть градиент на ширину страницы

html {
  min-height: 100%;
}
body {
  background: linear-gradient(45deg, #9890e3, #b1f4cf);
}

Растянуть градиент на видимую высоту экрана

body {
  background: linear-gradient(45deg, #9890e3, #b1f4cf);
  background-attachment: fixed;
}