Le haut de votre landing page
Une capture dans un cadre de navigateur se lit tout de suite comme une appli web. Avec un fond transparent (PNG ou WebP), elle se pose sur n’importe quelle couleur de section.
Créez un mockup navigateur avec votre capture
Ce mockup navigateur place la capture de votre produit dans une fenêtre Chrome, macOS ou Windows, avec votre URL et votre titre d’onglet, prête pour une landing page, une annonce de lancement ou votre documentation. Vos écrans pas encore sortis ne sont jamais envoyés.
- Votre URL et votre titre d’onglet
- Jamais envoyé
- Sans filigrane
Mockup navigateur
Chargement de l’exemple
Capture d’exemple· déposez, ou collez avec CtrlV
Sortie 0 × 0 px· reste sur cet appareil
Coller CtrlVTélécharger CtrlS
Reste sur votre appareil. Votre fichier est traité ici même, dans cet onglet. Rien n’est envoyé, enregistré ni transmis.
Mis à jour en octobre 2026
Réponse rapide
Pour faire un mockup navigateur, déposez votre capture dans l’outil ci-dessus, choisissez un cadre de navigateur et tapez l’URL à afficher dans la barre d’adresse. Ajoutez un fond et une marge si le mockup va sur une page chargée, choisissez un format comme 16:9 pour un post, et téléchargez un PNG. Avec le fond sur Aucun, vous obtenez un mockup transparent à poser sur n’importe quelle couleur.
Cachez les données privées avant le mockup
Le vrai produit, sans vrais clients à l’image
Les meilleures captures produit viennent de la vraie appli, pleine de vrais noms, d’e-mails et de chiffres d’affaires. L’extension Chrome Blurr.ing floute tout cela dans la page ouverte, puis son raccourci de capture prend l’image avec les flous déjà dans les pixels et propose un cadre de navigateur, un fond, une marge et des coins sur le résultat.
- Flouter dans la page est gratuit et illimité.
- L’offre gratuite comprend 5 captures ; Premium lève la limite.
- L’image est créée dans votre navigateur et n’est jamais envoyée.
Ajouter à Chrome
Installation gratuite, pour Chrome sur ordinateur.
Embellir une capture d’écranDégradés, marge, coins et ombre pour n’importe quelle capture, sans cadre de navigateur. Annoter une capture d’écranAjoutez flèches, cadres, texte et surlignage avant de mettre en forme. Masquer une partie d’une imageRectangle noir, flou ou pixellisation sur tout ce qui est privé dans une capture déjà prise.
Mode d’emploi
Comment faire un mockup navigateur
Quatre étapes, une minute environ, sans logiciel de design.
- 1
Ajoutez votre capture
Déposez une capture de votre produit sur l’aperçu, collez-la avec Ctrl+V (Cmd+V sur Mac), ou cliquez sur Choisir une image. Une page d’exemple s’affiche en attendant.
- 2
Choisissez le cadre
Chrome sous macOS ou Windows, une barre de navigateur macOS ou Windows, une simple fenêtre macOS ou Windows, ou aucun cadre. Réglez le thème sur clair, sombre ou auto pour suivre le haut de votre capture.
- 3
Écrivez l’URL et le titre de l’onglet
Tapez l’adresse à afficher dans la barre d’adresse, comme votreproduit.com/tarifs, et un titre d’onglet pour le cadre Chrome. L’URL n’a pas besoin d’exister.
- 4
Réglez le canevas et exportez
Ajoutez un fond, une marge, des coins et une ombre, choisissez un format comme 16:9 ou 1:1, puis téléchargez un PNG, un JPEG ou un WebP en pleine résolution, ou copiez l’image dans le presse-papiers.
À quoi ça sert
Des visuels qui disent « appli web » au premier coup d’œil
Une capture brute, c’est un rectangle d’interface. La même capture dans un cadre de navigateur montre où elle vit et de quel genre de produit il s’agit.
Annonces de lancement et galeries
Galeries Product Hunt, posts de lancement, notes de version : un produit se montre mieux en contexte qu’en simple recadrage. Choisissez 16:9 ou 1.91:1 pour que le cadre ne soit pas coupé dans l’aperçu.
Documentation et aide en ligne
Un cadre de navigateur avec le vrai chemin dans la barre d’adresse dit au lecteur sur quelle page se passe l’étape, ce qu’un panneau recadré ne peut pas faire.
Réseaux sociaux et présentations
Les formats pour X, LinkedIn, Instagram (carré et portrait), les stories et Dribbble agrandissent le canevas au bon format sans recadrer votre capture.
Les cadres
Six cadres de navigateur et de fenêtre
Chacun est dessiné en aplats à la résolution de votre capture, en clair ou en sombre, pour rester net sur une capture Retina.
- Chrome sous macOS
- Une barre d’onglets avec les trois pastilles de fenêtre et un onglet (favicon, titre, croix) au-dessus d’une barre d’outils avec précédent, suivant, actualiser et la barre d’adresse. Le cadre qui dit le plus clairement « appli web ».
- Chrome sous Windows
- La même barre d’onglets et la même barre d’outils, avec réduire, agrandir et fermer au bout de la barre d’onglets, à droite. C’est le Chrome que voient la plupart des gens.
- Navigateur macOS
- Les trois pastilles de fenêtre et un champ d’adresse centré, proche d’une barre de titre façon Safari.
- Navigateur Windows
- Un champ d’adresse à gauche et les boutons réduire, agrandir et fermer à droite.
- Fenêtre macOS
- Les pastilles de fenêtre et un titre en option, sans barre d’adresse : pour une appli de bureau, ou quand l’URL ne doit pas apparaître.
- Fenêtre Windows
- Une barre de titre toute simple avec réduire, agrandir et fermer à droite : pour une appli Windows, sans URL.
FAQ
Mockup navigateur : vos questions
Comment faire un mockup gratuitement ?
Avec l’outil ci-dessus : déposez votre capture, choisissez un cadre de navigateur, tapez votre URL, puis téléchargez. C’est gratuit, sans compte, sans filigrane et sans limite, et tout se passe dans votre navigateur.
Comment mettre une capture d’écran dans un mockup ?
Pas besoin de Photoshop ni d’un modèle PSD. Collez la capture ici avec Ctrl+V (Cmd+V sur Mac) ou déposez le fichier : elle se place directement dans le cadre choisi, à sa résolution d’origine. Réglez ensuite le fond, la marge et le format.
Puis-je mettre ma propre URL et le titre de l’onglet ?
Oui. Tapez n’importe quelle adresse dans le champ Adresse et n’importe quel texte dans Titre de l’onglet (cadre Chrome). Ils sont dessinés dans le cadre : vous pouvez montrer une page de préproduction sous votre domaine de production, ou un chemin court et propre.
Le fond peut-il être transparent ?
Oui. Mettez le fond sur Aucun et exportez en PNG ou en WebP : la zone autour de la fenêtre et ses coins arrondis restent transparents. Le JPEG ne gère pas la transparence : cette zone devient blanche.
Ça marche avec une capture en mode sombre ?
Oui. Avec le thème du cadre sur Auto, l’outil lit le haut de votre capture et choisit un cadre clair ou sombre assorti. Vous pouvez aussi forcer Clair ou Sombre.
Ma capture est-elle envoyée quelque part ?
Non. L’image est lue depuis votre appareil et dessinée sur un canvas dans cette page. Elle n’est jamais envoyée à un serveur ni conservée : vos écrans pas encore sortis restent privés.
Comment éviter de montrer des données clients dans un mockup ?
Floutez-les dans la page avant de faire la capture. L’extension Chrome Blurr.ing floute n’importe quel nom, e-mail ou chiffre sur une page web, puis son raccourci de capture prend l’image avec les flous déjà dans les pixels et propose aussi un cadre de navigateur. Son offre gratuite comprend 5 captures.