Создавайте CSS-градиенты визуально. Настраивайте цветовые остановки, прозрачность и положение для линейных, радиальных и конических градиентов, а затем копируйте готовый CSS-код.
CSS-градиенты - это изображения, которые браузер генерирует на основе математического описания, а не из растрового файла. Существует три основных типа градиентов: линейный (переходы цвета вдоль прямой линии), радиальный (переходы от центральной точки наружу) и конический (переходы вокруг центральной точки по углу). Каждый тип допускает любое количество цветовых точек, каждая из которых может иметь значение непрозрачности (опционально) и явно указанное или автоматическое положение.
Выберите тип градиента, а затем настройте цветовые остановки с помощью палитры цветов и регуляторов прозрачности. Для линейных градиентов задайте угол или воспользуйтесь горячей клавишей для выбора направления. Для радиальных и конических градиентов задайте положение центра и размер или начальный угол. Предварительный просмотр обновляется в режиме реального времени. Когда градиент будет выглядеть нужным образом, скопируйте сгенерированное свойство CSS и вставьте его прямо в таблицу стилей. Вы также можете вставить существующую строку градиента в панель «Импорт» для её редактирования.
CSS-градиенты позволяют обойтись без изображений для фона и декоративных элементов, что снижает вес страницы и обеспечивает четкость цветопереходов при любом разрешении. Используйте регулятор прозрачности для создания полупрозрачных цветовых остановок, позволяющих добиться эффекта «гласморфизма», или для плавного перехода от сплошного цвета к прозрачному. Тип градиента «конический» удобно использовать для создания индикаторов выполнения в стиле круговой диаграммы без использования JavaScript.