Macrulez Toolz — инструменты для разработчиков в браузере
Инструменты для веб-мастеров прямо в браузере.
Семь бесплатных инструментов: градиенты, сжатие изображений, SVG, единицы CSS, favicon, пароли и цветовые палитры. Всё считается локально, ничего не уходит на сервер.
Векторы без лишнего веса.— Tiny SVG
Инструмент для оптимизации SVG-кода и уменьшения размера файлов.
Этот оптимизатор SVG поможет вам сократить вес векторной графики, что критически важно для скорости загрузки сайта и SEO. Инструмент удаляет лишние теги, комментарии, метаданные и пробелы, делая код максимально чистым.
Что убираем из SVG
Комментарии
Метаданные
Невидимые элементы
Лишние группы
Пробелы и пустые теги
Слишком длинные пути
Три шага до лёгкого SVG
Загрузите
Откройте SVG-файл в редакторе.
Сравните
Превью покажет оригинал и результат, а рядом — процент сжатия и итоговый размер.
Заберите
Скачайте файл или архив, либо скопируйте код.
Где пригодится
Иконки, логотипы и иллюстрации на сайте — особенно когда SVG-графики много. В отличие от простых конвертеров, здесь вы управляете оптимизацией и видите результат до того, как скачаете файл.
Картинки легче, а качество прежнее.— Image compressor
Сжатие растровых изображений прямо в браузере: MozJPEG, WebP, AVIF, JPEG XL и другие кодеки.
кодеки работают на вашем устройстве, прямо в браузере
Локально
ваши изображения не уходят на сервер
До / после
слайдер для сравнения с оригиналом
Пакетно
несколько изображений за один раз
Обзор
Уменьшите вес изображений, чтобы страницы загружались быстрее. Выберите кодек, настройте баланс между качеством и размером и сравните результат с оригиналом, прежде чем сохранять.
Когда нужно сжимать
Интернет-магазины, блоги и лендинги, где картинки тянут вес страницы. Чем меньше размер, тем лучше LCP (Largest Contentful Paint) и выше балл в PageSpeed Insights.
Градиенты, которые оживают.— Gradient fabric
Мощный конструктор CSS-градиентов со слоями, редактором анимации и интуитивным интерфейсом.
Создавайте сложные и красивые градиенты для вашего сайта без написания кода. Наш генератор CSS-градиентов позволяет экспериментировать с цветами, прозрачностью и типами градиентов, получая готовый код в один клик. А встроенный редактор анимации с таймлайном позволяет оживить градиент: расставьте ключевые точки, задайте для них значения, и конструктор плавно проведёт градиент между ними.
Из чего состоит конструктор
Поддержка слоев
Наложение нескольких градиентов друг на друга для создания уникальных эффектов.
Полный контроль
Настройка линейных, радиальных и угловых градиентов.
Живая анимация
Таймлайн с дорожкой для каждого слоя: расставляйте ключевые точки, и градиент плавно меняется между ними. Результат виден мгновенно.
Готовый код
Копирование чистого CSS-кода для вашего проекта, в том числе готовых @keyframes для анимации.
От идеи до CSS
Соберите
Добавьте слои, выберите тип градиента и настройте цвета, прозрачность и углы.
Оживите
Включите таймлайн, расставьте ключевые точки и задайте значения — градиент плавно проведёт между ними.
Заберите код
Скопируйте готовый CSS вместе с @keyframes или скачайте файл.
Для чего
Фоны для кнопок, баннеров, карточек товаров и целых секций сайта, а также живые анимированные фоны, переливающиеся заголовки и заставки. Результат — обычный CSS без JavaScript и сторонних библиотек.
Один цвет — вся палитра.— Spectrum Cell
Генератор цветовых палитр на правилах гармонии: точный контроль над цветом, проверка доступности и готовая тема на выходе.
Выберите базовый цвет на колесе, задайте правило гармонии и получите палитру от 3 до 12 цветов. Правьте любой цвет вручную, соберите палитру из изображения, проверьте контраст и вид при дальтонизме, посмотрите результат на макете и экспортируйте его в CSS, SCSS, Tailwind, JSON и другие форматы. Всё считается прямо в браузере, изображения никуда не отправляются.
Правила гармонии
Комплементарная
Расщеплённая комплементарная
Аналогичная
Триада
Прямоугольник
Квадрат
Монохромная
Акцент и нейтральные
Что умеет Spectrum Cell
Колесо и точная правка
Тяните цвета по колесу, меняйте яркость и насыщенность. Каждый цвет правится в RGB, HSB, HSL, LAB, OKLCH или CMYK и вводится как HEX, rgb(), hsl() или по названию.
Правила и закрепление
Восемь правил гармонии, от 3 до 12 цветов, закрепление отдельных цветов и режим «Своя», когда цвета заданы вручную.
Палитра из изображения
Выберите, какие цвета искать: главные, яркие, приглушённые, светлые или тёмные. Яркие акценты не теряются, точки на снимке можно двигать, а картинку приближать.
Доступность
Контраст по WCAG и APCA, симуляция дальтонизма и подсказки, какие пары цветов годятся для текста и как их подтянуть.
Предпросмотр и экспорт
Палитра на макетах сайта, дашборда и постера с ролями цветов. Экспорт в CSS, SCSS, Tailwind, JSON, токены W3C, SVG, PNG и ASE.
Случайная палитра и ссылки
Пробел даёт новую палитру, закреплённые цвета остаются. Отмена шагов, избранное и ссылка, по которой палитру можно открыть где угодно.
Где пригодится
Фирменные цвета и дизайн-система, тема сайта или приложения в светлой и тёмной версии, цвета для графиков, подбор оттенков под иллюстрацию или фото. Палитра, проверенная на читаемость, за минуту вместо часов подбора на глаз.
Больше двух десятков единиц: длины, углы, время и разрешение. Значения пересчитываются сразу при вводе, а результат можно скопировать в нужной единице, как значение, CSS-переменную или готовое объявление.
Обзор
Быстро и точно переводите значения между px, rem, em, %, vw, vh и другими единицами, чтобы верстка получалась адаптивной и доступной. Инструмент учитывает корневой и родительский размеры шрифта, размеры экрана и родительского блока, а значит, результат совпадает с тем, что увидит браузер. Всё считается прямо в браузере, ваши файлы никуда не отправляются.
Что умеет Unit Forge
Умный конвертер
Введите «24px» прямо в поле: результат считается сразу. Есть история, закреплённые пары единиц и наглядный предпросмотр размера.
Массовая конвертация
Списки значений и CSS-объявления целиком. Счётчик показывает, сколько значений преобразовано, а режим «только изменённые» убирает лишнее.
CSS и SCSS файлы
Загрузите файлы или вставьте код: выберите свойства для обработки. Сравнение «до и после» подсвечивает каждое изменённое значение.
Адаптивная типографика
clamp() для одного значения, плавные размеры между двумя экранами и целая шкала ступеней для заголовков и текста.
Из макета в код
Размер из макета в пикселях превращается в vw, проценты и clamp(), которые масштабируются вместе с шириной экрана.
Токены дизайн-системы
Таблица значений с нужным шагом сетки одним кликом становится CSS-переменными, SCSS-картой или JS-объектом.
Контекст решает
В отличие от простых калькуляторов, Unit Forge учитывает базовый размер шрифта (root), размер родительского элемента, высоту строки и родительский блок. Проценты считаются от шрифта, ширины или высоты в зависимости от CSS-свойства. Настройки, свои пресеты вроде Tailwind или Bootstrap и история сохраняются в браузере.
Из макета в код
Перенесите размеры из Figma: укажите ширину макета и получите vw и clamp(). Соберите адаптивную типографику, токены для дизайн-системы и конвертируйте целые CSS-файлы за один проход.
Один логотип — все иконки.— Fav Icona
Генератор favicon и постера для соцсетей с полным контролем и предпросмотром.
Создайте набор иконок (favicon.ico, PNG, Apple Touch Icon) для всех устройств и браузеров, а при желании и постер для превью ссылок в соцсетях. Загрузите изображение, настройте его и получите готовый пакет файлов и HTML-код с тегами для вставки. Для иконок доступны светлая и тёмная темы, свои настройки Apple и Android, а постер можно обрезать, сжать в JPEG, PNG или WebP и увидеть заранее как карточку в Telegram, Facebook и X. Всё работает прямо в браузере: ваши изображения никуда не отправляются.
Что в наборе
favicon.ico
PNG
SVG
Apple Touch Icon
Web manifest
Постер Open Graph
Теги og и Twitter
HTML-код
Запрос для AI-агента
Как получить набор
Загрузите
Выберите иконку и, если нужно, постер для соцсетей.
Настройте
Обрежьте, задайте фон, формат и сжатие постера, заполните теги.
Проверьте
Посмотрите иконку в разных размерах и контекстах, а постер как карточку в мессенджерах и соцсетях.
Подключите
Скачайте пакет и вставьте HTML-код на сайт или передайте задачу AI-агенту.
Когда пригодится
Запуск нового сайта или ребрендинг: сразу полный набор favicon и красивое превью ссылки в соцсетях. Заметная иконка и постер помогают узнаваемости бренда.
Ваши данные под контролем.— Data Lab
Откройте файл или вставьте текст, и данные можно смотреть, править, переводить между форматами, сравнивать, проверять и собирать из нескольких источников: десять редакторов в одной лаборатории.
Data Lab открывает JSON, JSONC, YAML, TOML, CSV, TSV и XML, а на вход принимает ещё JS-объекты и JSON Lines. Данные видны как исходный текст, дерево и таблица. Их можно искать запросами, конвертировать с отчётом о потерях, сравнивать, проверять по схеме, превращать в типы TypeScript, дополнять тестовыми данными и сливать из нескольких источников. Комментарии и числа, которые не помещаются в double, сохраняются. Всё считается в браузере: файлы никуда не отправляются.
Форматы
JSON
JSONC
YAML
TOML
CSV
TSV
XML
JS-объекты
JSON Lines
Что умеет Data Lab
Редактор и дерево
Исходный текст с подсветкой, свёрткой и поиском рядом с деревом данных. Правка в одном месте сразу видна в другом, а комментарии JSON, JSONC и YAML при правке сохраняются.
Форматы и таблица
Семь форматов определяются по файлу или тексту. Массив объектов открывается таблицей с сортировкой и фильтрами, а вложенные значения разворачиваются в столбцы.
Поиск и запросы
Поиск по ключам и значениям, пути JSON Pointer и JSONPath, запросы на JSONPath и JMESPath с фильтрами и проекциями, переход от найденного к месту в тексте.
Конвертация и шаги
Перевод между форматами с отчётом о том, что теряется и можно ли вернуть обратно. Преобразование по шагам: фильтры, вычисления, группировка, маскирование; конвейер сохраняется в файл и применяется к другим документам.
Сравнение
Что добавлено, удалено, изменено, переставлено, с настройкой для массивов и допуском для чисел. Результат можно получить как JSON Patch (RFC 6902) с проверкой, что патч действительно даёт второй документ.
Схемы и типы
Проверка по JSON Schema, создание схемы и Zod из образцов. Типы TypeScript по нескольким образцам: необязательные поля, варианты, перечисления, обобщённые типы.
Тестовые данные
Пользователи, товары и заказы или данные по вашей схеме и образцам. Повторяемость даёт seed, имена и тексты бывают русскими и английскими.
Слияние
Несколько источников в один результат: списком, по ключам, наложением с отчётом о перекрытом, соединением по ключу или маппингом полей на схеме со связями, условиями, группировкой и сводками. Результат можно получить и как JS-объект.
Большие файлы и конфигурации
Разбор идёт в отдельном потоке, файлы на десятки мегабайт открываются без зависаний, а долгую работу можно остановить. Настройки и созданное в редакторах сохраняются в файл и загружаются обратно.
Как пользоваться
Перетащите файл в окно, вставьте текст из буфера обмена или откройте пример. Выберите редактор по задаче: смотреть, менять, проверять или создавать. Результат можно скопировать, скачать или передать в другой редактор. Данные остаются в браузере: автосохранение выключено, пока вы его не включите.
Надёжные пароли без сервера.— Stronghold
Генератор надёжных паролей и парольных фраз с гибкой настройкой и честной оценкой сложности.
Генерация и проверка идут полностью в вашем браузере: пароли и фразы не передаются на сервер и нигде не сохраняются. Запоминаются только настройки.
Обзор
Создавайте уникальные и стойкие к взлому пароли для защиты ваших аккаунтов, а также запоминающиеся парольные фразы из слов. Настройте длину, наборы символов, свои символы и исключения, выберите готовый пресет, а оценка в битах и время подбора покажут реальный уровень надёжности. Заодно можно проверить уже существующий пароль и найти в нём слабые места.
Что умеет Stronghold
Пароли и парольные фразы
Случайные пароли любой длины или запоминающиеся фразы из английских слов.
Пресеты и свои правила
Готовые наборы: надёжный, PIN-код, Wi-Fi, легко набрать. Свои символы, исключения и минимум символов каждого вида.
Без путаницы
Исключите неоднозначные символы: «l» и «1», «O» и «0». Удобно, когда пароль приходится вводить вручную.
Честная оценка
Энтропия в битах, уровень надёжности и время подбора пересчитываются сразу и учитывают все ваши ограничения.
Проверка пароля
Вставьте свой пароль: он оценивается прямо в браузере, а повторы, последовательности, годы и слова из словарей подсвечиваются.
Удобная работа
Скройте пароли, обновите один или все, скопируйте или скачайте в TXT, CSV и JSON. Горячая клавиша R обновляет сразу все.
Для чего
Мастер-пароли для менеджеров паролей, пароли для новых аккаунтов, API-ключи и другие случаи, где важна безопасность. Упор на гибкие настройки и наглядную обратную связь — чтобы пароль был одновременно надежным и удобным для запоминания.
