Спрей (или градиент) в CSS можно сделать, используя свойство background-image и функцию linear-gradient() или radial-gradient().
Линейный спрей может быть создан с использованием linear-gradient(), которая описывает плавный переход между двумя или более цветами. Синтаксис для создания линейного спрея выглядит так:
background-image: linear-gradient(направление, цвет1, цвет2, ...);Значение направление задает направление линейного спрея и может быть указано в градусах или ключевых словах, например to top или to right. Например, чтобы создать линейный спрей с горизонтальным переходом от красного к желтому цвету, можно использовать следующий CSS код:
background-image: linear-gradient(to right, red, yellow);Радиальный спрей может быть создан с использованием radial-gradient(), которая описывает переход от центра края. Синтаксис для создания радиального спрея выглядит так:
background-image: radial-gradient(форма, цвет1, цвет2, ...);Значение форма определяет форму радиального спрея и может быть указано в ключевых словах, например circle или ellipse. Например, чтобы создать радиальный спрей с круговым переходом от красного к желтому цвету, можно использовать следующий CSS код:
background-image: radial-gradient(circle, red, yellow);Также можно создавать спреи с использованием более сложных цветовых значений, например с помощью RGB или HSL. Для этого в функции указываются соответствующие значения цвета, например:
background-image: linear-gradient(to right, rgb(255, 0, 0), hsl(120, 100%, 50%));