Первый экран лендинга
Скриншот в рамке браузера с первого взгляда говорит: это веб-приложение. С прозрачным фоном (PNG или WebP) его можно поставить на блок любого цвета.
Мокап браузера онлайн: скриншот сайта в окне Chrome
Мокап браузера онлайн без Photoshop и Figma: вставьте скриншот продукта в рамку Chrome, macOS или Windows со своим адресом и названием вкладки и сохраните его для лендинга, поста о запуске или документации. Неопубликованные экраны не загружаются на сервер.
- Свой адрес и вкладка
- Не загружается на сервер
- Без водяного знака
Мокап браузера
Загружаем пример
Пример скриншота· перетащите или вставьте через CtrlV
На выходе 0 × 0 px· остается на этом устройстве
Вставить CtrlVСкачать CtrlS
Остается на вашем устройстве. Файл обрабатывается прямо в этой вкладке браузера. Ничего не загружается, не сохраняется и никуда не отправляется.
Обновлено: октябрь 2026 г.
Если коротко
Чтобы сделать мокап браузера, перетащите скриншот в инструмент выше, выберите рамку браузера и впишите нужный адрес в адресную строку. Если мокап встанет на пестрый фон, добавьте подложку и отступы, для поста выберите размер вроде 16:9 и скачайте PNG. С фоном «Нет» получится прозрачный мокап, который ляжет на любой цвет.
Скройте личное до мокапа
Настоящий продукт без настоящих клиентов в кадре
Лучшие скриншоты продукта получаются из настоящего приложения, а в нем полно настоящих имен, почты и выручки. Расширение Blurr.ing для Chrome размывает все это прямо на живой странице, затем его скриншот снимает вкладку с размытием уже в пикселях и предлагает для результата рамку окна браузера, фон, отступы и скругление.
- Размывать на странице можно бесплатно и без ограничений.
- В бесплатном тарифе 5 скриншотов, Premium снимает лимит.
- Изображение собирается в браузере и не загружается на сервер.
Установить в Chrome
Устанавливается бесплатно. Работает в Chrome на компьютере.
Как это работает
Как сделать мокап браузера
Четыре шага, около минуты, без графического редактора.
- 1
Добавьте скриншот
Перетащите скриншот своего продукта на превью, вставьте через Ctrl+V (Cmd+V на Mac) или нажмите «Выбрать фото». Пока вы этого не сделали, показывается пример страницы.
- 2
Выберите рамку браузера
Chrome на macOS или Windows, заголовок браузера либо простое окно в стиле macOS или Windows, или вовсе без рамки. Тему поставьте светлую, темную или «Авто», чтобы рамка совпала с верхом скриншота.
- 3
Впишите адрес и название вкладки
Наберите в адресной строке нужный адрес, например vashprodukt.ru/ceny, а для рамки Chrome еще и название вкладки. Адрес не обязан быть настоящим и рабочим.
- 4
Настройте холст и сохраните
Добавьте фон, отступы, углы и тень, выберите размер вроде 16:9 или 1:1, затем скачайте PNG, JPEG или WebP в полном разрешении или скопируйте в буфер обмена.
Где пригодится
Картинки продукта, по которым сразу понятно: это веб-сервис
Голый скриншот это просто прямоугольник интерфейса. Тот же скриншот в рамке браузера сразу показывает, где он живет и что это за продукт.
Посты о запуске и галереи
Галереи Product Hunt, посты о запуске и списки изменений показывают продукт лучше в контексте, чем голой обрезкой. Выберите 16:9 или 1.91:1, чтобы превью не обрезало рамку.
Документация и справка
Рамка браузера с настоящим путем в адресной строке точно говорит читателю, на какой странице выполняется шаг. Обрезанная панель этого не скажет.
Соцсети и слайды
Размеры для X, LinkedIn, постов и вертикальных фото Instagram, сторис и Dribbble растягивают холст до нужных пропорций, не обрезая скриншот.
Рамки
Шесть рамок браузера и окна
Каждая рисуется простыми фигурами в разрешении вашего скриншота, в светлой или темной теме, поэтому остается четкой даже на снимке с Retina.
- Chrome на macOS
- Полоса вкладок с тремя цветными кнопками окна и одной вкладкой (иконка, название, крестик) над панелью с кнопками «назад», «вперед», «обновить» и адресной строкой. Самая узнаваемая рамка веб-приложения.
- Chrome на Windows
- Те же полоса вкладок и панель, только кнопки «свернуть», «развернуть» и «закрыть» стоят справа, в конце полосы вкладок. Так Chrome выглядит у большинства пользователей.
- Браузер macOS
- Три цветные кнопки окна и адресная строка по центру, почти как заголовок Safari.
- Браузер Windows
- Адресная строка слева, справа значки «свернуть», «развернуть» и «закрыть».
- Окно macOS
- Кнопки окна и необязательное название, без адресной строки: для десктопных программ или когда адрес показывать не нужно.
- Окно Windows
- Простой заголовок окна с кнопками «свернуть», «развернуть» и «закрыть» справа: для программ под Windows, без адреса.
FAQ
Вопросы о мокапе браузера
Как сделать мокап сайта без Photoshop и Figma?
Прямо здесь, в браузере: сделайте скриншот сайта, вставьте его в инструмент, выберите рамку Chrome, macOS или Windows и впишите адрес. Шаблоны PSD и графический редактор не нужны, результат скачивается в PNG, JPEG или WebP.
Можно ли поменять адрес и название вкладки?
Да. Впишите любой адрес в поле «Адрес» и любой текст в «Название вкладки» (для рамки Chrome). Они рисуются прямо в рамке, так что можно показать тестовую страницу под рабочим доменом или короткий аккуратный путь.
Можно ли сделать мокап с прозрачным фоном?
Да. Поставьте фон «Нет» и сохраните в PNG или WebP: область вокруг окна и скругленные углы останутся прозрачными. У JPEG прозрачности нет, и эта область станет белой.
Это бесплатно и без водяных знаков?
Да. Без аккаунта, без водяного знака и без лимита на количество мокапов. Инструмент работает целиком в браузере.
Мой скриншот куда-то загружается?
Нет. Изображение читается с вашего устройства и рисуется на холсте на этой странице. Оно не отправляется на сервер и не хранится, поэтому неопубликованные экраны продукта остаются при вас.
Подходит ли это для скриншотов в темной теме?
Да. В режиме «Авто» тема рамки определяется по верхней части скриншота: светлая или темная, в тон. Можно и принудительно выбрать светлую или темную.
Чем это отличается от инструмента «Красивый скриншот»?
Движок тот же, отправная точка другая. «Красивый скриншот» начинается с градиента и без рамки, чтобы просто оформить картинку. Эта страница начинается с рамки браузера и выносит вперед адрес, название вкладки и стиль рамки, для картинок продукта.
Как убрать данные клиентов из мокапа продукта?
Размойте их на живой странице еще до скриншота. Расширение Blurr.ing для Chrome размывает любое имя, почту или число на веб-странице, затем его скриншот снимает вкладку с размытием уже в пикселях и тоже предлагает рамку окна браузера. В бесплатном тарифе 5 скриншотов.