Точки остановки цвета
Результат CSS
Пресеты
Нажмите на тему, чтобы мгновенно загрузить предварительно настроенный градиент.
Как это работает и синтаксис CSS
Этот инструмент визуально создает стандартные свойства CSS `background-image` с использованием функций градиента. По мере добавления цветов и изменения позиций генератор вычисляет точный синтаксис, необходимый для современных браузеров.
Линейные градиенты
Линейный градиент переходит между цветами по прямой линии. Синтаксис:
linear-gradient(angle, color1 position1, color2 position2, ...)
Угол (angle) определяет направление (например, 90deg идет слева направо). Позиция (position) определяет, где цвет достигает своей чистой формы (от 0% до 100%).
Радиальные градиенты
Радиальный градиент переходит между цветами от центральной точки наружу. Синтаксис:
radial-gradient(shape at position, color1 pos1, color2 pos2, ...)
Форма (shape) может быть circle (круг) или ellipse (эллипс). Этот инструмент по умолчанию устанавливает позицию в центр (center) элемента.
Конические градиенты
Конический градиент переходит между цветами, вращаясь вокруг центральной точки, как круговая диаграмма. Синтаксис:
conic-gradient(from angle at center, color1 pos1, color2 pos2, ...)
Конические градиенты отлично подходят для создания цветовых кругов, секторных диаграмм и сложных угловых узоров.