QuickTools
Сжать изображение, Конвертер изображений, Изображения в PDF, Объединить PDF, Генератор QR-кода, Генератор паролей, Изменить размер изображения, Обрезать изображение, Повернуть/отразить изображение, Удалить EXIF из фото, Пипетка цвета, Генератор favicon, Водяной знак на фото, Разделить PDF, Повернуть PDF, PDF в изображения, Генератор UUID, Конвертер цветов, Генератор текста-рыбы, Генератор хэша, Калькулятор ИМТ, Счётчик слов и символов, Изменить регистр текста, Форматирование JSON, Base64 текст, Кодировщик URL, Генератор градиентов, Генератор box-shadow, Тестер регулярных выражений, Markdown-редактор, Сравнение текстов, ASCII-арт из фото, Генератор мемов, Коллаж из фото, Ресайзер для Instagram, Обрезка круглого аватара, Создать стикер, Счётчик SMS, Ссылка на WhatsApp, Ссылка на Telegram, Лимиты символов соцсетей, Генератор хэштегов, QR-визитка (vCard), Discord-таймстамп, Кадр из видео, Информация о видео, Раскадровка видео, Видео в GIF, Извлечь аудио из видео, Обрезать аудио, Конвертер аудио в WAV, Информация об аудио, Объединить аудио, Изменить громкость аудио, OCR: текст с изображения, Озвучить текст, Excel в CSV, CSV в Excel, Excel в JSON, JSON в Excel, CSV в JSON, JSON в CSV, Просмотр Excel онлайн, Объединить Excel, Удалить дубликаты в Excel, Разделить столбец Excel, Калькулятор комиссии Wildberries, Калькулятор комиссии Ozon, Калькулятор комиссии Я.Маркет, Калькулятор маржинальности, Генератор штрихкода EAN-13, Генератор артикулов SKU, Калькулятор объёмного веса, Калькулятор скидки и СПП, Цена за единицу товара, Влияние возвратов на прибыль, Счётчик токенов Claude, Калькулятор стоимости Claude API, Библиотека промптов для Claude, XML-теги для промпта, Конструктор системного промпта, Шаблонизатор промптов, Форматирование few-shot примеров, Калькулятор контекстного окна, Промпт для структурированного вывода, Промпт для ревью кода
ЛОКАЛЬНО В БРАУЗЕРЕ

Генератор CSS-градиентов онлайн

Настройте цвета и угол градиента визуально — сразу увидите результат и получите готовую CSS-строку для вставки в проект.

background: linear-gradient(90deg, #ff5e1a, #12151a);

Как это работает

  1. 1Выберите тип градиента: линейный или радиальный.
  2. 2Настройте угол (для линейного) и два цвета.
  3. 3Скопируйте готовый CSS-код одним нажатием.

Частые вопросы

Можно ли использовать больше двух цветов?

Текущая версия собирает градиент из двух цветов — самого частого случая. Готовый CSS можно доработать вручную, добавив дополнительные цветовые точки через запятую.

Linear-gradient и radial-gradient — в чём разница

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

Угол в линейном градиенте отсчитывается по часовой стрелке: 0deg — снизу вверх, 90deg — слева направо, 180deg — сверху вниз. Экспериментируйте со слайдером, чтобы увидеть разницу вживую, прежде чем вставлять код в проект.

Подобранные здесь цвета можно точно перевести между HEX/RGB/HSL в конвертере цветов, а цвет для градиента можно взять прямо с референсного изображения через пипетку цвета. Для дополнительного объёма фону часто добавляют мягкую тень — используйте генератор box-shadow для этого же элемента.