Создайте линейный CSS-градиент и скопируйте готовый код.
background: linear-gradient(135deg, #157a54, #2f6fe0);Линейный градиент — плавный переход между двумя или несколькими цветами по заданному направлению. В CSS он задаётся свойством background-image со значением linear-gradient(). Можно использовать как фон секции, кнопки, иконки или для тонкого декора.
Подбирайте цвета с близкой светлотой — резкий переход между светлым и тёмным выглядит грубо. Угол 135° (по диагонали) считается универсальным и приятным глазу. Если на фоне предполагается текст, держите контраст с самым светлым местом градиента не ниже 4,5:1 — этого требует стандарт доступности.
Удобно для героев лендингов, тонких подложек карточек, кнопок-акцентов и больших цветовых пятен на пустых страницах. Не стоит злоупотреблять — слишком яркий градиент перегружает интерфейс.
Да, линейные градиенты поддерживаются в Chrome, Firefox, Safari, Edge уже больше десяти лет. Полифилы не нужны.
CSS-тени с живым предпросмотром.
Скругление углов с предпросмотром.
Контраст цветов по стандарту WCAG.
Оттенки и тона из базового цвета.
Иконки сайта всех размеров из картинки.
Раскладка flex с предпросмотром.