Перейти к содержимому
Toolars
Каталог
Сообщить об ошибке

Дизайн · утилита · Локально

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

CSS Gradient Generator

Составляйте линейные и радиальные градиенты с явным углом, фокусом и опорными точками цвета и копируйте единое объявление background.

Путь задачи / от ввода к результату

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

Работает локально · Ничего не загружается на сервер

Как работает Генератор CSS-градиентов, конфиденциальность и похожие инструменты

Путь задачи / от ввода к результату

Как составить CSS-градиент

  1. 01

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

    Откройте «Тип градиента» и выберите «Линейный» для прямого перехода или «Радиальный» для кругового. Значок предпросмотра показывает текущий угол, пока вы работаете.

  2. 02

    Задайте направление или фокус

    «Направление / фокус» идёт от 0 до 360. Для линейного градиента это угол в градусах; для радиального он размещает точку фокуса на кольце вокруг центра. Значок отслеживает значение вживую, что упрощает оценку мелких поправок.

  3. 03

    Подберите цвета и остановки

    Задайте «Начальный цвет» и «Конечный цвет», затем расположите «Начальная остановка» (0–99%) и «Конечная остановка» (1–100%). Начало должно идти раньше конца, иначе статус меняется на ПРОВЕРЬТЕ ЗНАЧЕНИЯ.

  4. 04

    Управляйте полосой перехода

    Расстояние между двумя остановками — это зона перехода: остановки в 1% друг от друга дают почти жёсткую грань для двухцветных полос, а остановки на 0% и 100% — значения по умолчанию — самый мягкий переход во всю ширину. Смотрите на предпросмотр, а не на числа.

  5. 05

    Скопируйте объявление

    Нажмите «Копировать CSS» или «Скачать .css», чтобы сохранить toolars-gradient.css. Правило .gradient — одно объявление background: linear-gradient(…deg, …) или radial-gradient(circle at …, …), — точно соответствующее вашим остановкам.

  6. 06

    Примените и расширьте

    Одиночное объявление чисто сочетается с вашими собственными background-size или background-repeat. Нужен третий цвет? Скопируйте правило и вставьте среднюю остановку вручную — две настроенные вами остановки закрепляют оба конца перехода. Будучи одной строкой, оно также аккуратно вставляется в кастомное свойство, если ваша дизайн-система хранит токены так.

Факты об инструменте

Обработка
В вашем браузере
Ввод покидает устройство
Никогда
Хранение
Ничего не сохраняется
Цена
Бесплатно

Ваши данные остаются в браузере.

Генератор CSS-градиентов использует проверенный путь локального выполнения и не создаёт скрытую историю ввода и вывода.

Локальное выполнение

Работает внутри текущей вкладки браузера.

Никакой скрытой обработки

Активные данные инструмента никогда не становятся записями документов Toolars.

Аккаунт не требуется

Используйте основной сценарий без создания профиля. Избранное синхронизируется с аккаунтом после входа.

Мгновенный сброс

Закройте вкладку — и рабочие данные исчезнут.

Что на самом деле делает Генератор CSS-градиентов

Хиро-полоса, перетекающая из фирменного синего в бирюзовый; мягкое радиальное свечение за фотографией продукта; двухцветная полоса с жёстким переходом в таблице тарифов — градиенты несут больше интерфейсов, чем любой графический актив. Радиальный режим окупается свечениями и виньетками, которые линейный переход подделать не может. Собрать такой визуально, с явными остановками вместо угадывания, занимает секунды, а поскольку генератор работает в этой вкладке, эксперименты с палитрой остаются приватными до релиза дизайна. Скопированное объявление не требует зачистки перед тем, как попасть в таблицу стилей.

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

Почему предпросмотр показывает ПРОВЕРЬТЕ ЗНАЧЕНИЯ?
Действует одно правило: начальная остановка должна стоять раньше конечной. Равные или перевёрнутые остановки делают градиент неоднозначным, поэтому сообщение называет правило, а копирование и скачивание ждут, пока оно не пройдёт. Достаточно сохранить между остановками даже 1%.
Что делает «Направление / фокус» в радиальном режиме?
Для радиального градиента угол ничего не вращает — он располагает фокус круга на кольце в 25% от центра, так что 0° сдвигает фокус вправо, а 180° — влево. Экспортируемые координаты circle at X% Y% отражают это точно.
Какой угол даёт нужное направление?
Линейные углы следуют соглашению CSS: 0deg ведёт вверх, 90deg — вправо, 180deg — вниз, а 270deg — влево. Значение по умолчанию 135deg идёт из верхнего левого угла в нижний правый — диагональ, которая идёт большинству хиро-полос.
Как сделать полосу с жёстким переходом?
Проверка требует, чтобы начальная остановка стояла раньше конечной, поэтому поставьте их в 1% друг от друга — 49% и 50% для центрального шва. Полоса перехода схлопывается до волосяной линии, которая читается как чёткое двухцветное деление на любом элементе.
Можно ли собрать трёхцветный градиент?
Генератор намеренно работает с двумя явными остановками — именно их покрывают контролы и проверка. После копирования объявления добавить среднюю остановку вручную — правка в одну строку.
Загружаются ли мои цвета куда-либо?
Нет. Всё вычисляется в текущей вкладке браузера без аккаунта, и ни одно значение не попадает в хранилище, журналы или аналитику. Нажмите «Сбросить», чтобы вернуться к линейному переходу по умолчанию.

Продолжить: Дизайн

Связанные задачи, а не тупик.

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

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

CSS Loader Generator

Проектируйте спиннер-кольцо или три точки с настройкой размера, толщины, скорости и цветов и копируйте CSS с поддержкой reduced motion.

Создание

Генератор CSS-чекбоксов

CSS Checkbox Generator

Стилизуйте кастомный чекбокс — размер, рамка, цвета состояний — и копируйте CSS, под которым остаётся настоящий доступный с клавиатуры input.

Создание

Генератор CSS-переключателей

CSS Switch Generator

Собирайте переключатель на чистом CSS: дорожка, бегунок и цвета двух состояний; в коде — обработка фокуса и reduced motion.

Создание

Генератор CSS clip-path

CSS Clip Path Generator

Редактируйте вершины мышью, клавиатурой или координатами. Четыре шаблона, локальное копирование объявления clip-path или полного CSS.

Создание