Генератор CSS-градиентов — код линейных и радиальных градиентов
Тип
Угол
град
Форма
Цветовые точки
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); Визуальный конструктор CSS-градиентов. Выберите линейный или радиальный тип, задайте угол, добавьте нужное число цветовых точек и скопируйте готовое свойство background. Превью меняется, пока вы двигаете ползунки, — так можно подобрать градиент, не правя ни одного hex-кода вручную.
Как это работает
- 1 Выберите линейный или радиальный Переключите тип градиента. Линейный ведёт цвета вдоль прямой под заданным углом; радиальный расходится из центра кругом или эллипсом.
- 2 Задайте цвета и точки Нажмите на образец цвета, чтобы сменить оттенок, потяните ползунок, чтобы сдвинуть точку, и нажмите «Добавить точку», чтобы добавить ещё цвет. Лишнюю точку можно удалить.
- 3 Скопируйте CSS Свойство background обновляется под превью в реальном времени. Нажмите «Копировать» и вставьте его прямо в свою таблицу стилей.
Ваши данные защищены
Всё обрабатывается прямо в вашем браузере. Никакие файлы или текст не отправляются на наши серверы. Отключите интернет — инструмент продолжит работать.
Часто задаваемые вопросы
- Чем линейный градиент отличается от радиального?
- Линейный градиент смешивает цвета вдоль прямой линии — направление задаётся углом в градусах. Радиальный расходится от центральной точки кругом или эллипсом. Линейный обычно берут для кнопок и фонов, радиальный — для бликов, свечения и мягких виньеток.
- Сколько цветовых точек можно добавить?
- Сколько угодно. Две точки дают простой переход; три и больше позволяют собрать многоцветные смеси и резкие цветовые полосы. У каждой точки есть свой цвет и позиция от 0% до 100% вдоль градиента.
- Что означает значение угла?
- Для линейного градиента угол задаёт направление перехода. 0deg — вверх, 90deg — вправо, 180deg — вниз. То есть 90deg делает переход слева направо, а 45deg идёт по диагонали из левого нижнего угла.
- Этот градиент работает во всех браузерах?
- Да. Свойства linear-gradient() и radial-gradient() давно поддерживаются во всех современных браузерах без вендорных префиксов. Скопированный код — это стандартный CSS, который можно вставить в любой проект.
- Можно ли применить градиент к тексту или рамке?
- Да, есть приём. Для градиентного текста задайте градиент как background, затем добавьте background-clip: text и color: transparent. Для рамки используйте border-image или фон-градиент за чуть меньшим внутренним элементом. Здесь вы получаете сам градиент, чтобы применить его в этих техниках.
- Отправляется ли мой градиент на сервер?
- Нет. Конструктор работает целиком на JavaScript в вашем браузере. Ничего из выбранного не загружается, не логируется и нигде не хранится.