Градиенты — это плавные перетекания одних цветов в другие, используемые, в основном, для фона. В CSS градиенты бывают двух типов: линейные и радиальные.
Линейные градиенты задаются функцией linear-gradient(), которая принимает в качестве параметров направление градиента (в радианах - deg) и список точек (минимум 2), содержащие цвет и позицию точки (в процентах).
.gradient {
background: linear-gradient(
90deg, /* задаём направление градиента */
blueviolet 0%, /* задаём цвет и позицию первой точки градиента */
tomato 100% /* задаём цвет и позицию второй точки градиента */
);
}
Подробнее о линейном градиенте можно прочитать здесь:
MDN: linear-gradient()
Радиальные градиенты задаются функцией radial-gradient(), которая принимает в качестве параметров форму градиента (circle или ellipse) и список точек, содержащие цвет и позицию точки.
.gradient {
background: radial-gradient(
circle, /* задаём форму градиента */
blueviolet 0%, /* задаём цвет и позицию первой точки градиента */
tomato 100% /* задаём цвет и позицию второй точки градиента */
);
}
Подробнее о радиальном градиенте можно прочитать здесь:
MDN: radial-gradient()
Для быстрого формирования градиентов существуют генераторы градиентов, один из которых я рекомендую своим читателям:
CSS Gradient
Эту и другие статьи можно почитать в моём практическом руководстве HTML Practice: https://artik-man.github.io/HTML-Practice/
Если у вас возникли идеи для новой главы этой книги, присылайте issue на GitHub: https://github.com/Artik-Man/HTML-Practice/issues