Skip to content
Бесплатный инструментDesign

Создавайте красивые градиенты и экспортируйте их в формате CSS или изображений.

Выбирайте цвета, добавляйте остановки и регулируйте угол или центральную точку, чтобы создать именно тот градиент, который вам нужен. Инструмент поддерживает линейные, радиальные и конические градиенты с неограниченным количеством остановок цвета. Скопируйте код CSS для своей таблицы стилей или загрузите градиент в формате PNG с высоким разрешением для использования в дизайнерских проектах.

Используйте этот инструмент бесплатно

Функции

1

Три типа градиента

Создавайте линейные градиенты с любым углом, радиальные градиенты с настраиваемым центром и формой или конические градиенты, огибающие точку. Переключайтесь между типами и обновляйте предварительный просмотр мгновенно.

2

Неограниченное количество цветовых остановок

Добавьте столько цветовых точек, сколько вам нужно, вдоль полосы градиента. Перетащите остановки, чтобы изменить их положение, дважды щелкните, чтобы изменить цвет, или щелкните правой кнопкой мыши, чтобы удалить. Каждая остановка поддерживает непрозрачность для полупрозрачных градиентов.

3

Вывод CSS-кода

Инструмент генерирует действительный код фонового изображения CSS с префиксами поставщиков. Скопируйте код и вставьте его прямо в таблицу стилей. Выходные данные обновляются в реальном времени по мере редактирования градиента.

4

Экспорт изображений PNG

Загрузите градиент в формате PNG в любом разрешении — от миниатюр размером 100 пикселей до баннеров размером 4000 пикселей. Используйте изображение в качестве фона, наложения или элемента дизайна в инструментах, которые не поддерживают градиенты CSS.

Как использовать

1

Выберите тип градиента

Выберите линейный, радиальный или конический. Для линейного установите угол; для радиального установите центральную точку и форму.

2

Добавляйте и корректируйте цвета

Нажмите на полосу градиента, чтобы добавить точки цвета. Перетащите, чтобы изменить положение, дважды щелкните, чтобы изменить цвет, и отрегулируйте непрозрачность для каждой остановки.

3

Скопируйте CSS или загрузите

Скопируйте сгенерированный код CSS для использования в Интернете или установите разрешение и загрузите градиент в виде изображения PNG.

Технические характеристики

Типы градиентовЛинейный, радиальный, конический
Цветовые остановкиБезлимитный
Диапазон углов0–360°
CSS-выводСтандартные + префиксы поставщиков
PNG экспортДо 4000 × 4000 пикселей
ОбработкаНа стороне клиента (мгновенно)

Related Magic Eraser Tools

Общие вопросы

Могу ли я создать градиент с прозрачностью?

+

Да. Каждая цветовая остановка имеет ползунок непрозрачности. Установите непрозрачность ниже 100%, чтобы создать полупрозрачные области градиента. В выводе CSS используются значения rgba, а при экспорте PNG сохраняется альфа-канал.

Что такое конический градиент?

+

Конический градиент излучает остановки цвета вокруг центральной точки, как движение стрелки часов. Это полезно для эффектов в стиле круговой диаграммы, цветовых кругов и декоративного фона. Поддержка браузеров в современных браузерах превосходна.

Могу ли я использовать сгенерированный CSS в любой структуре?

+

Да. Результатом является стандартный CSS, который работает в простом HTML, React, Vue, Tailwind и любой другой платформе, поддерживающей встроенный CSS или CSS на основе таблиц стилей.

Нужен градиент поверх фотографии?

AI Enhance может регулировать цветовой тон и освещение ваших фотографий, а наш инструмент «Наложение изображений» позволяет накладывать градиент поверх любого изображения, чтобы получить безупречный вид.

Попробуйте бесплатно

More free tools

Explore our other limited free edits after sign-in photo and image tools.

Измените размер любого изображения до идеальных размеров

Измените размер изображений до точного размера в пикселях для социальных сетей, Интернета и печати. Регистрация не требуется. Поддерживает JPEG, PNG и WebP размером до 50 МБ.

Уменьшите размеры файлов изображений без ущерба для четкости

Сжимайте изображения JPEG, PNG и WebP до 80 % с минимальной видимой потерей качества. Отрегулируйте ползунок качества для полного контроля. Никакой регистрации не требуется.

Конвертируйте изображения PNG в JPEG за считанные секунды

Мгновенно конвертируйте изображения PNG в формат JPEG. Настройте качество вывода, выберите цвет фона для прозрачных областей и загрузите — регистрация не требуется.

Конвертируйте фотографии JPEG в PNG с поддержкой прозрачности.

Конвертируйте изображения JPEG в формат PNG для обеспечения качества без потерь и поддержки прозрачности. Идеально перед удалением фона. Никакой регистрации или установки не требуется.

Мгновенно конвертируйте фотографии iPhone HEIC в JPEG

Конвертируйте фотографии Apple HEIC и HEIF в универсально совместимый формат JPEG. Работает в браузере — без установки приложения, без регистрации, без загрузки файлов на сервер.

Конвертируйте изображения в формат WebP и обратно.

Конвертируйте JPEG и PNG в WebP для более быстрой загрузки страниц или конвертируйте WebP обратно в JPEG/PNG для совместимости. Никакой регистрации, никакой установки, запускается в браузере.