La portada de tu landing
Una captura dentro de un navegador se entiende al momento como una aplicación web. Usa un fondo transparente (PNG o WebP) para colocarla sobre el color de cualquier sección.
Crea un mockup de navegador con tu captura y tu URL
Crea un mockup de navegador con la captura de tu producto: una ventana de Chrome, macOS o Windows con tu propia URL y título de pestaña, lista para una landing, un anuncio de lanzamiento o la documentación. Las pantallas que aún no has publicado nunca se suben.
- Tu URL y tu pestaña
- Nunca se sube
- Sin marca de agua
Mockup de navegador
Cargando la muestra
Captura de muestra· arrástrala o pégala con CtrlV
Resultado: 0 × 0 px· no sale de este dispositivo
Pegar CtrlVDescargar CtrlS
Se queda en tu dispositivo. Tu archivo se procesa aquí mismo, en esta pestaña del navegador. No se sube, no se guarda y no se envía a ningún sitio.
Actualizado en octubre de 2026
Respuesta rápida
Para hacer un mockup de navegador, arrastra tu captura a la herramienta de arriba, elige un marco de navegador y escribe en la barra de direcciones la URL que quieras. Añade un fondo y margen si el mockup va sobre una página muy cargada, elige un tamaño como 16:9 para una red social y descarga un PNG. Con el fondo en Ninguno obtienes un mockup transparente que puedes colocar sobre cualquier color.
Oculta los datos antes del mockup
Tu producto real, sin clientes reales en la imagen
Las mejores capturas de producto salen de la aplicación real, que está llena de nombres, correos y facturación reales. La extensión de Chrome Blurr.ing difumina cualquiera de esos datos en la página abierta; luego su atajo de captura hace la captura con los difuminados ya en los píxeles y ofrece sobre el resultado un marco de navegador, fondo, margen y esquinas.
- Difuminar en la página es gratis e ilimitado.
- El plan gratuito incluye 5 capturas; Premium quita el límite.
- La imagen se crea en tu navegador y nunca se sube.
Añadir a Chrome
Instalación gratuita, para Chrome de escritorio.
Marco y fondo para capturasDegradados, margen, esquinas y sombra para cualquier captura, sin necesidad de marco de navegador. Editar una captura de pantallaAñade flechas, recuadros, texto y resaltado antes de enmarcarla. Censurar una imagenTapa, difumina o pixela cualquier dato privado de una captura que ya has hecho.
Cómo funciona
Cómo hacer un mockup de navegador
Cuatro pasos, un minuto y sin programas de diseño.
- 1
Añade tu captura
Arrastra una captura de tu producto a la vista previa, pégala con Ctrl+V (Cmd+V en Mac) o pulsa Elegir imagen. Hasta entonces verás una página de muestra.
- 2
Elige el marco
Chrome en macOS o Windows, una barra de navegador de macOS o Windows, una ventana de macOS o Windows sin más o ningún marco. Pon el tema en claro, oscuro o automático para que encaje con la parte de arriba de tu captura.
- 3
Escribe la URL y el título de la pestaña
Escribe la dirección que quieras en la barra, por ejemplo tuproducto.com/precios, y un título de pestaña para el marco de Chrome. No tiene por qué ser una URL real y activa.
- 4
Ajusta el lienzo y exporta
Añade fondo, margen, esquinas y sombra, elige un tamaño como 16:9 o 1:1 y descarga un PNG, JPEG o WebP a resolución completa, o cópialo al portapapeles.
Para qué sirve
Imágenes de producto que dicen “aplicación web” a primera vista
Una captura sin más es un rectángulo de interfaz. La misma captura en un marco de navegador enseña dónde vive y qué tipo de producto es.
Lanzamientos y galerías
Las galerías de Product Hunt, los posts de lanzamiento y las notas de versión enseñan mejor un producto en contexto que recortado. Elige 16:9 o 1.91:1 para que la vista previa no corte el marco.
Documentación y artículos de ayuda
Un marco de navegador con la ruta real en la barra de direcciones le dice al lector en qué página ocurre cada paso, algo que un panel recortado no puede.
Redes sociales y presentaciones
Los tamaños para X, LinkedIn, publicaciones y verticales de Instagram, historias y Dribbble amplían el lienzo hasta la proporción sin recortar tu captura.
Los marcos
Seis marcos de navegador y de ventana
Cada uno se dibuja con formas planas a la resolución de tu captura, en claro u oscuro, así que se ve nítido incluso en una captura Retina.
- Chrome en macOS
- Una barra de pestañas con los tres botones de color de la ventana y una pestaña (icono, título y cerrar) sobre otra con atrás, adelante, recargar y la barra de direcciones. El marco que más claramente dice “aplicación web”.
- Chrome en Windows
- La misma barra de pestañas y de herramientas, con minimizar, maximizar y cerrar al final de la barra de pestañas, a la derecha. Así ve Chrome la mayoría de la gente.
- Navegador de macOS
- Los tres botones de color de la ventana y un campo de dirección centrado, parecido a la barra de título de Safari.
- Navegador de Windows
- Un campo de dirección a la izquierda y los iconos de minimizar, maximizar y cerrar a la derecha.
- Ventana de macOS
- Los botones de la ventana y un título opcional, sin barra de direcciones: para aplicaciones de escritorio o cuando no quieres que se vea la URL.
- Ventana de Windows
- Una barra de título sencilla con minimizar, maximizar y cerrar a la derecha: para aplicaciones de Windows, sin URL.
FAQ
Mockup de navegador: preguntas frecuentes
¿Cómo hacer un mockup de una página web?
Haz una captura de la página, arrástrala a la herramienta de arriba, elige el marco Chrome con pestaña (o el de macOS o Windows) y escribe la URL y el título que quieras. Añade fondo y margen si lo necesitas y descarga un PNG. No hace falta Figma, Photoshop ni descargar plantillas.
¿Puedo cambiar la URL y el título de la pestaña?
Sí. Escribe cualquier dirección en el campo Dirección y cualquier texto en Título de la pestaña (marco de Chrome). Se dibujan dentro del marco, así que puedes enseñar una página de pruebas bajo tu dominio de producción o una ruta corta y limpia.
¿Puedo descargarlo con fondo transparente?
Sí. Pon el fondo en Ninguno y exporta en PNG o WebP: la zona alrededor de la ventana y sus esquinas redondeadas quedan transparentes. JPEG no admite transparencia, así que esa zona sale en blanco.
¿Lleva marca de agua?
No. Es gratis, sin cuenta, sin marca de agua y sin límite de mockups. Funciona entero en tu navegador.
¿Se sube mi captura a algún servidor?
No. La imagen se lee desde tu dispositivo y se dibuja en un lienzo de esta página. Nunca se envía a un servidor ni se guarda, así que las pantallas de un producto sin publicar siguen siendo privadas.
¿Funciona con capturas en modo oscuro?
Sí. Con el tema del marco en Automático, la herramienta mira la parte de arriba de tu captura y elige un marco claro u oscuro a juego. También puedes forzar Claro u Oscuro.
¿En qué se diferencia de la herramienta de marco y fondo para capturas?
Es el mismo motor con otro punto de partida. La de marco y fondo empieza con un degradado y sin marco, para dejar una captura bien presentada. Esta empieza con un marco de navegador y pone primero la URL, el título de la pestaña y el estilo del marco, para imágenes de producto.
¿Cómo evito que salgan datos de clientes en un mockup?
Difumínalos en la página abierta antes de hacer la captura. La extensión de Chrome Blurr.ing difumina cualquier nombre, correo o número de una web, y su atajo de captura hace la captura con los difuminados ya en los píxeles y también ofrece un marco de navegador. Su plan gratuito incluye 5 capturas.