Macrulez Toolz — инструменты для разработчиков в браузере

Инструменты для веб-мастеров прямо в браузере.

Шесть бесплатных инструментов: градиенты, сжатие изображений, SVG, единицы CSS, favicon и пароли. Всё считается локально, ничего не уходит на сервер.

Tiny SVG

Векторы без лишнего веса.— Tiny SVG

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

Открыть Tiny SVG →

Обзор

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

Что убираем из SVG

  • Комментарии
  • Метаданные
  • Невидимые элементы
  • Лишние группы
  • Пробелы и пустые теги
  • Слишком длинные пути

Три шага до лёгкого SVG

  1. Загрузите

    Откройте SVG-файл в редакторе.

  2. Сравните

    Превью покажет оригинал и результат, а рядом — процент сжатия и итоговый размер.

  3. Заберите

    Скачайте файл или архив, либо скопируйте код.

Где пригодится

Иконки, логотипы и иллюстрации на сайте — особенно когда SVG-графики много. В отличие от простых конвертеров, здесь вы управляете оптимизацией и видите результат до того, как скачаете файл.

Image compressor

Картинки легче, а качество прежнее.— Image compressor

Сжатие растровых изображений прямо в браузере: MozJPEG, WebP, AVIF, JPEG XL и другие кодеки.

Открыть Image compressor →

Кодеки на выбор

  • MozJPEG
  • Oxipng
  • WebP
  • AVIF
  • JPEG XL
  • QOI

Как это устроено

WASM
кодеки работают на вашем устройстве, прямо в браузере
Локально
ваши изображения не уходят на сервер
До / после
слайдер для сравнения с оригиналом
Пакетно
несколько изображений за один раз

Обзор

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

Когда нужно сжимать

Интернет-магазины, блоги и лендинги, где картинки тянут вес страницы. Чем меньше размер, тем лучше LCP (Largest Contentful Paint) и выше балл в PageSpeed Insights.

Gradient fabric

Градиенты, которые оживают.— Gradient fabric

Мощный конструктор CSS-градиентов со слоями, редактором анимации и интуитивным интерфейсом.

Открыть Gradient fabric →

Обзор

Создавайте сложные и красивые градиенты для вашего сайта без написания кода. Наш генератор CSS-градиентов позволяет экспериментировать с цветами, прозрачностью и типами градиентов, получая готовый код в один клик. А встроенный редактор анимации с таймлайном позволяет оживить градиент: расставьте ключевые точки, задайте для них значения, и конструктор плавно проведёт градиент между ними.

Из чего состоит конструктор

Поддержка слоев

Наложение нескольких градиентов друг на друга для создания уникальных эффектов.

Полный контроль

Настройка линейных, радиальных и угловых градиентов.

Живая анимация

Таймлайн с дорожкой для каждого слоя: расставляйте ключевые точки, и градиент плавно меняется между ними. Результат виден мгновенно.

Готовый код

Копирование чистого CSS-кода для вашего проекта, в том числе готовых @keyframes для анимации.

От идеи до CSS

  1. Соберите

    Добавьте слои, выберите тип градиента и настройте цвета, прозрачность и углы.

  2. Оживите

    Включите таймлайн, расставьте ключевые точки и задайте значения — градиент плавно проведёт между ними.

  3. Заберите код

    Скопируйте готовый CSS вместе с @keyframes или скачайте файл.

Для чего

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

Unit Forge

Из px в rem без калькулятора.— Unit Forge

Конвертер CSS-единиц с гибкой настройкой.

Открыть Unit Forge →

Единицы, с которыми работаем

  • px
  • rem
  • em
  • %
  • vw
  • vh

Значения пересчитываются сразу при вводе, а результат можно скопировать в нужной единице.

Обзор

Быстро и точно переводите значения из одной единицы измерения в другую для создания адаптивной и доступной верстки. Наш инструмент учитывает корневой и родительский размеры шрифта, что делает конвертацию максимально точной.

Контекст решает

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

Из макета в код

Перевод макетов из Figma в код, адаптивная типографика и отзывчивые интерфейсы.

Fav Icona

Один логотип — все иконки.— Fav Icona

Генератор favicon для вашего сайта с полным контролем и предпросмотром.

Открыть Fav Icona →

Обзор

Создайте набор иконок (favicon.ico, PNG, Apple Touch Icon) для всех устройств и браузеров. Наш инструмент позволяет загрузить изображение, настроить его и получить готовый пакет файлов и HTML-код для вставки.

Что в наборе

  • favicon.ico
  • PNG
  • SVG
  • Apple Touch Icon
  • HTML-код

Как получить набор

  1. Загрузите

    Выберите исходное изображение.

  2. Настройте

    Обрежьте, масштабируйте, задайте фон.

  3. Проверьте

    Посмотрите иконку в разных размерах и контекстах: вкладка браузера, закладки.

  4. Подключите

    Скачайте пакет и вставьте готовый HTML-код на сайт.

Когда пригодится

Запуск нового сайта или ребрендинг: сразу полный набор favicon для всех устройств и браузеров. Заметная иконка помогает узнаваемости бренда.

Stronghold

Надёжные пароли без сервера.— Stronghold

Генератор надежных паролей с гибкой настройкой и оценкой сложности.

Открыть Stronghold →

Пароли не покидают браузер

Генерация происходит полностью в вашем браузере, пароли не передаются на сервер.

Обзор

Создавайте уникальные и стойкие к взлому пароли для защиты ваших аккаунтов. Наш инструмент позволяет настроить длину, набор символов и исключить неоднозначные символы, а визуальная шкала покажет уровень надежности.

Что можно настроить

Длина и набор символов

Цифры, буквы верхнего и нижнего регистра, спецсимволы.

Без путаницы

Исключите неоднозначные символы: «l» и «1», «O» и «0».

Оценка сложности

Шкала надежности пересчитывается в реальном времени.

Для чего

Мастер-пароли для менеджеров паролей, пароли для новых аккаунтов, API-ключи и другие случаи, где важна безопасность. Упор на гибкие настройки и наглядную обратную связь — чтобы пароль был одновременно надежным и удобным для запоминания.