Topo da landing page
Um print dentro de uma moldura de navegador se lê como “isto é um app web” na hora. Use fundo transparente (PNG ou WebP) para encaixar em qualquer cor de seção.
Coloque seu print numa janela de navegador de verdade
Um mockup de navegador em um minuto: ponha o print do seu produto numa moldura do Chrome, do macOS ou do Windows, com a sua URL e o título da aba, e exporte para a landing page, o post de lançamento ou a documentação. Telas ainda não lançadas nunca são enviadas.
- Sua URL e título da aba
- Sem upload
- Sem marca d’água
Mockup de navegador
Carregando exemplo
Print de exemplo· solte, ou cole com CtrlV
Saída 0 × 0 px· fica neste aparelho
Colar CtrlVBaixar CtrlS
Fica no seu aparelho. Seu arquivo é processado aqui mesmo, nesta aba do navegador. Nada é enviado, salvo ou compartilhado.
Atualizado em outubro de 2026
Resposta rápida
Para fazer um mockup de navegador, solte o print na ferramenta acima, escolha a moldura do navegador e digite a URL que quer na barra de endereço. Ponha um fundo e uma margem se o mockup for para uma página carregada, escolha um tamanho como 16:9 para um post e baixe o PNG. Com o fundo em Nenhum, o mockup sai transparente para você colocar sobre qualquer cor.
Esconda os dados privados antes do mockup
Produto de verdade, sem clientes de verdade na imagem
Os melhores prints de produto vêm do app real, que está cheio de nomes, e-mails e faturamento reais. A extensão Blurr.ing para Chrome desfoca tudo isso na página aberta, e o atalho de captura dela tira o print com os desfoques já nos pixels e oferece moldura de navegador, fundo, margem e cantos no resultado.
- Desfocar na página é grátis e sem limite.
- O plano grátis inclui 5 capturas; o Premium tira o limite.
- A imagem é gerada no navegador e nunca é enviada.
Adicionar ao Chrome
Grátis para instalar, no Chrome do computador.
Como funciona
Como fazer um mockup de navegador
Quatro passos, mais ou menos um minuto, sem programa de design.
- 1
Adicione o print
Solte um print do seu produto na prévia, cole com Ctrl+V (Cmd+V no Mac) ou clique em Escolher imagem. Até lá, aparece uma página de exemplo.
- 2
Escolha a moldura
Chrome no macOS ou no Windows, uma barra de navegador do macOS ou do Windows, uma janela simples do macOS ou do Windows ou nenhuma moldura. Deixe o tema em claro, escuro ou automático para combinar com o topo do print.
- 3
Escreva a URL e o título da aba
Digite o endereço que quiser na barra, como seuproduto.com.br/precos, e um título de aba para a moldura do Chrome. Nada precisa ser uma URL real e no ar.
- 4
Ajuste a tela e exporte
Ponha fundo, margem, cantos e sombra, escolha um tamanho como 16:9 ou 1:1 e baixe um PNG, JPEG ou WebP na resolução original, ou copie para a área de transferência.
Onde ajuda
Imagens de produto que dizem “app web” de cara
Um print solto é um retângulo de interface. O mesmo print numa moldura de navegador mostra onde ele roda e que tipo de produto é.
Posts de lançamento e galerias
Galerias do Product Hunt, posts de lançamento e notas de versão mostram um produto melhor em contexto do que num recorte solto. Escolha 16:9 ou 1.91:1 para a moldura não ser cortada na prévia.
Documentação e artigos de ajuda
Uma moldura de navegador com o caminho real na barra de endereço diz ao leitor exatamente em qual página o passo acontece, coisa que um painel recortado não diz.
Redes sociais e slides
Tamanhos para X, LinkedIn, posts quadrados e em pé do Instagram, stories e Dribbble aumentam a tela até a proporção sem cortar o print.
As molduras
Seis molduras de navegador e de janela
Cada uma é desenhada com formas simples na resolução do seu print, clara ou escura, então fica nítida mesmo numa captura de tela Retina.
- Chrome no macOS
- Uma barra de abas com os três botões coloridos da janela e uma aba (ícone, título, fechar) sobre a barra de ferramentas com voltar, avançar, recarregar e a barra de endereço. A moldura que mais diz “app web”.
- Chrome no Windows
- A mesma barra de abas e de ferramentas, com minimizar, maximizar e fechar no canto direito da barra de abas. É assim que a maioria das pessoas vê o Chrome.
- Navegador macOS
- Os três botões coloridos da janela com o campo de endereço no centro, perto da barra de título do Safari.
- Navegador Windows
- Campo de endereço à esquerda e os botões de minimizar, maximizar e fechar à direita.
- Janela macOS
- Os botões da janela e um título opcional, sem barra de endereço: para apps de computador ou quando a URL não deve aparecer.
- Janela Windows
- Uma barra de título simples com minimizar, maximizar e fechar à direita: para apps do Windows, sem URL.
FAQ
Perguntas sobre o mockup de navegador
Como fazer um mockup de site?
Tire um print da página, solte na ferramenta acima, escolha a moldura do Chrome, do macOS ou do Windows e digite a URL e o título da aba. Ajuste fundo, margem e tamanho e baixe o PNG. Não precisa de Figma nem de outro programa.
Dá para trocar a URL e o título da aba?
Dá. Digite qualquer endereço no campo Endereço e qualquer texto em Título da aba (moldura do Chrome). Os dois são desenhados na moldura, então você pode mostrar uma página de homologação com o domínio de produção ou um caminho curto e limpo.
Exporta PNG com fundo transparente?
Exporta. Deixe o Fundo em Nenhum e baixe em PNG ou WebP: a área em volta da janela e os cantos arredondados ficam transparentes. O JPEG não tem transparência, então essa área fica branca.
Qual a diferença para um mockup no Figma?
No Figma você monta a moldura num arquivo de design e encaixa o print à mão. Aqui a moldura já vem desenhada: você solta o print, digita a URL e baixa. Para uma imagem de produto rápida, sem conta e sem arquivo para manter, este caminho é mais curto.
Funciona com print em modo escuro?
Funciona. Com o tema da moldura em Automático, a ferramenta lê o topo do print e escolhe uma moldura clara ou escura para combinar. Você também pode forçar Claro ou Escuro.
Meu print é enviado para algum lugar?
Não. A imagem é lida do seu aparelho e desenhada numa tela dentro desta página. Ela nunca vai para um servidor e nunca é salva, então telas ainda não lançadas continuam privadas.
Como tirar dados de clientes de um mockup de produto?
Desfoque na página aberta antes de tirar o print. A extensão Blurr.ing para Chrome desfoca qualquer nome, e-mail ou número numa página da web, e o atalho de captura dela tira o print com os desfoques já nos pixels e também oferece moldura de navegador. O plano grátis inclui 5 capturas.