Создавайте красивые градиенты и экспортируйте их в формате CSS или изображений.
Выбирайте цвета, добавляйте остановки и регулируйте угол или центральную точку, чтобы создать именно тот градиент, который вам нужен. Инструмент поддерживает линейные, радиальные и конические градиенты с неограниченным количеством остановок цвета. Скопируйте код CSS для своей таблицы стилей или загрузите градиент в формате PNG с высоким разрешением для использования в дизайнерских проектах.
Используйте этот инструмент бесплатноBrowser tool
Gradient generator
Create CSS gradients, preview them live, and export a PNG locally in your browser.
background-image: linear-gradient(90deg, rgba(255, 56, 56, 1) 0%, rgba(124, 58, 237, 1) 100%);Starter palettes
Как использовать
Выберите тип градиента
Выберите линейный, радиальный или конический. Для линейного установите угол; для радиального установите центральную точку и форму.
Добавляйте и корректируйте цвета
Нажмите на полосу градиента, чтобы добавить точки цвета. Перетащите, чтобы изменить положение, дважды щелкните, чтобы изменить цвет, и отрегулируйте непрозрачность для каждой остановки.
Скопируйте CSS или загрузите
Скопируйте сгенерированный код CSS для использования в Интернете или установите разрешение и загрузите градиент в виде изображения PNG.
Функции
Три типа градиента
Создавайте линейные градиенты с любым углом, радиальные градиенты с настраиваемым центром и формой или конические градиенты, огибающие точку. Переключайтесь между типами и обновляйте предварительный просмотр мгновенно.
Неограниченное количество цветовых остановок
Добавьте столько цветовых точек, сколько вам нужно, вдоль полосы градиента. Перетащите остановки, чтобы изменить их положение, дважды щелкните, чтобы изменить цвет, или щелкните правой кнопкой мыши, чтобы удалить. Каждая остановка поддерживает непрозрачность для полупрозрачных градиентов.
Вывод CSS-кода
Инструмент генерирует действительный код фонового изображения CSS с префиксами поставщиков. Скопируйте код и вставьте его прямо в таблицу стилей. Выходные данные обновляются в реальном времени по мере редактирования градиента.
Экспорт изображений PNG
Загрузите градиент в формате PNG в любом разрешении — от миниатюр размером 100 пикселей до баннеров размером 4000 пикселей. Используйте изображение в качестве фона, наложения или элемента дизайна в инструментах, которые не поддерживают градиенты CSS.
After this task
After this free tool, open Ai Enhance for the next AI editing workflow.
Continue with Ai EnhanceТехнические характеристики
| Типы градиентов | Линейный, радиальный, конический |
| Цветовые остановки | Безлимитный |
| Диапазон углов | 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.
Преобразуйте цвета между именованными форматами HEX, RGB, HSL, HSB, CMYK и CSS. Просмотрите предварительный просмотр в реальном времени, скопируйте любое значение и экспортируйте карту цветов. Никакой регистрации не требуется.
Преобразуйте цветовые коды HEX в значения RGB и наоборот. Предварительный просмотр в реальном времени, копирование одним щелчком мыши и вывод фрагмента CSS. Регистрация не требуется — работает в вашем браузере.
Выберите любой цвет из загруженного изображения и мгновенно получите его коды HEX, RGB и HSL. Создавайте палитры из фотографий для веб-дизайна, брендинга и иллюстраций.
Загрузите фотографию и извлеките 5–10 доминирующих цветов с помощью кодов HEX, RGB и HSL. Копируйте образцы, экспортируйте их как переменные ASE или CSS. Никакой регистрации не требуется.
Создавайте QR-коды для URL-адресов, текста, учетных данных Wi-Fi и визитных карточек. Настройте цвета, добавьте центральный логотип и загрузите его в формате PNG или SVG. Никакой регистрации не требуется.
Рассчитайте ширину, высоту или соотношение сторон изображений и видео. Введите любые два значения и получите третье. Предустановленные соотношения для социальных сетей, фильмов и печати. Никакой регистрации не требуется.