Генератор CSS-градиентов онлайн
Создавайте линейные, радиальные и конические CSS-градиенты с live-цветовыми точками и копируйте код прямо в браузере.
Генератор CSS-градиентов полностью работает в вашем браузере. Цвета и настройки градиента, которые вы создаёте, никогда не отправляются в ArrayKit.
Открыть Конвертер цветов CSS
Об инструменте Генератор CSS-градиентов
Генератор CSS-градиентов визуально создаёт линейные, радиальные и конические градиенты, чтобы вам больше никогда не пришлось вручную подбирать значение background-image. Выберите тип градиента, перетащите ползунок угла или центральную точку, а затем добавляйте, удаляйте или перекрашивайте сколько угодно цветовых точек с помощью встроенных выбора цвета и точных позиций в процентах. Панель предпросмотра обновляется мгновенно при любом изменении, а инструмент выдаёт готовую к копированию декларацию `background: ...;`, которую можно сразу вставить в таблицу стилей. Он создан для фронтенд-разработчиков и дизайнеров, которым нужно быстро набросать фон баннера, кнопки или карточки без открытия дизайнерского приложения. Всё выполняется локально в браузере, поэтому созданные вами градиенты никуда не отправляются.
Возможности
- Линейный, радиальный и конический типы градиента в одном инструменте
- Неограниченное число цветовых точек, каждая со своим цветовым пикером и позицией в процентах
- Мгновенное добавление и удаление точек кнопками добавить/удалить
- Ползунок и числовое поле угла для линейных и конических градиентов
- Переключатель формы круг/эллипс и перетаскиваемый центр для радиальных градиентов
- Панель предпросмотра обновляется при каждом изменении
- Формирует готовую к копированию CSS-декларацию `background: ...;`
- Полностью работает в браузере, ничего не отправляется на сервер
Как использовать Генератор CSS-градиентов
- Выберите тип градиента: линейный, радиальный или конический
- Настройте угол (линейный/конический) или форму и центр (радиальный)
- Добавьте цветовые точки и настройте цвет и позицию в процентах для каждой
- Скопируйте сгенерированный CSS background из панели кода
Пример
Ввод
linear, 90deg, red -> blue
Результат
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
Линейный градиент из двух точек от красного к синему под углом 90 градусов.
Частые ошибки и устранение неполадок
- Градиент выглядит плоским или показывает только один цвет. — Добавьте минимум две цветовые точки с разными позициями — одна точка или две точки в одной позиции не дадут видимого перехода.
- Радиальный градиент отображается овалом, а не кругом. — Переключите форму на «Круг», либо оставьте «Эллипс», если хотите, чтобы градиент растягивался под соотношение сторон элемента.
- Конический градиент начинается не с той точки. — Скорректируйте значение угла — конические градиенты вращают начальную точку по часовой стрелке от выбранного угла, начиная с 0deg, направленного вверх.
- Между точками цвета выглядят полосами или мутными. — Добавьте промежуточную цветовую точку рядом с местом перехода, вместо того чтобы браузер интерполировал два очень разных оттенка на широком интервале.
Часто задаваемые вопросы
- Что такое Генератор CSS-градиентов?
- Это визуальный инструмент для создания линейных, радиальных и конических CSS-градиентов из цветовых точек, с предпросмотром в реальном времени и готовой к копированию декларацией background — без ручного написания синтаксиса градиента.
- Может ли Генератор CSS-градиентов создавать не только линейные, но и радиальные и конические градиенты?
- Да. Переключите сегментированный контрол на «Радиальный» для кругового или эллиптического градиента с перетаскиваемым центром, либо на «Конический» для градиента, вращающегося вокруг центра от выбранного начального угла.
- Сколько цветовых точек можно добавить в генераторе градиентов?
- Сколько угодно. Используйте кнопку «Добавить точку», чтобы создать новую, и кнопку удаления в любой строке, чтобы её убрать, при условии, что останется хотя бы одна точка.
- Отправляет ли Генератор CSS-градиентов мои цвета куда-либо?
- Нет. Генератор CSS-градиентов полностью работает в вашем браузере. Цвета, позиции и градиенты, которые вы создаёте, никогда не покидают ваше устройство.
- Какой CSS выдаёт генератор градиентов?
- Одну декларацию background, например background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);, готовую для вставки в таблицу стилей, атрибут style или шаблон CSS-in-JS.
- Можно ли задать точную позицию центра для радиального или конического градиента?
- Да. Ползунки Center X и Center Y позволяют перемещать точку начала градиента в диапазоне от 0% до 100% элемента по каждому направлению.
Связанные инструменты
Все инструменты ArrayKit