Softonic

Генератор сетчатого градиента

Создайте плавный многоцветный фон из 4, 6 или 9 подвижных точек. Выберите цвет каждой точки, перемещайте их по холсту, попробуйте подобранную случайную палитру и экспортируйте результат в SVG или PNG. Также можно скопировать CSS-приближение из наложенных радиальных градиентов. Во время работы проект остается в этой вкладке браузера.

Как создать градиент с эффектом сетки

  1. 1

    Выберите сетку

    Начните с 4, 6 или 9 контрольных точек. Большее число точек создает больше цветовых областей.

  2. 2

    Выберите цвета

    Используйте палитру для каждой точки. Редактор хранит шестизначные цвета HEX.

  3. 3

    Переместите точки

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

  4. 4

    Выберите размер

    Выберите альбомный, широкоэкранный или квадратный формат для SVG и PNG.

  5. 5

    Экспортируйте дизайн

    Скачайте PNG или SVG либо скопируйте CSS-приближение из радиальных градиентов.

Как создаются три варианта

  • PNG использует то же смешивание цветов с учетом расстояния, что и предпросмотр. При другом соотношении сторон те же относительные точки отрисовываются в новых размерах.
  • SVG накладывает радиальные градиенты в тех же контрольных точках и сохраняет четкость при масштабировании.
  • CSS создает слой radial-gradient() для каждой точки поверх базового цвета, без отдельного файла изображения.

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

Рекомендации по палитре

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

Размещение контрольных точек

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

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

Частые сценарии

  • Фоны главных блоков и разделители секций.
  • Карточки для социальных сетей и обложки видео.
  • Фоны презентаций и иллюстраций.
  • Загрузочные экраны и декоративные панели.

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

Конфиденциальность и хранение

Цвета, положения и разрешение остаются в памяти браузера и в sessionStorage. Они не добавляются в URL воронки и состояние на сервере. Инструмент может зафиксировать факт экспорта, не включая значения проекта.

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

Часто задаваемые вопросы

Они используют разные способы отрисовки. PNG смешивает пиксели по расстоянию, а SVG и CSS накладывают радиальные градиенты. Цвета и положения одинаковы, но отдельные пиксели не совпадают.

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

Редактор хранит шестизначные цвета HEX. Используйте палитру или сначала преобразуйте RGB либо HSL в HEX.

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

Его можно восстановить из sessionStorage в течение максимум шести часов в текущей вкладке. Закрытие вкладки обычно удаляет его раньше. Проект не передается через наши серверы и не добавляется в URL воронки.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Генератор цветовой палитры

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

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.