Hero della landing page
Uno screenshot dentro la cornice di un browser si legge al volo come “questa è un’app web”. Usa uno sfondo trasparente (PNG o WebP) per appoggiarlo su qualsiasi colore di sezione.
Mockup browser per gli screenshot del tuo sito
Con questo mockup browser online metti lo screenshot del tuo prodotto in una cornice di Chrome, macOS o Windows con il tuo URL e il titolo della scheda, poi lo esporti per una landing page, un post di lancio o la documentazione. Le schermate non ancora pubblicate non vengono mai caricate.
- Il tuo URL e titolo della scheda
- Mai caricato
- Senza filigrana
Mockup browser
Caricamento dell’esempio
Screenshot di esempio· trascina, o incolla con CtrlV
Uscita 0 × 0 px· resta su questo dispositivo
Incolla CtrlVScarica CtrlS
Resta sul tuo dispositivo. Il file viene elaborato qui, in questa scheda del browser. Niente viene caricato, salvato o inviato altrove.
Aggiornato: ottobre 2026
Risposta rapida
Per creare un mockup di un sito web, trascina lo screenshot nello strumento qui sopra, scegli la cornice del browser e scrivi l’URL che vuoi nella barra degli indirizzi. Aggiungi sfondo e margini se il mockup va su una pagina piena di elementi, scegli una dimensione come 16:9 per un post e scarica un PNG. Con lo sfondo su Nessuno ottieni un mockup trasparente da mettere su qualsiasi colore.
Nascondi i dati privati prima del mockup
Il prodotto vero, senza i clienti veri nell’immagine
Gli screenshot di prodotto migliori vengono dall’app vera, che è piena di nomi, email e fatturati veri. L’estensione Blurr.ing per Chrome li sfoca nella pagina aperta, poi la sua scorciatoia di cattura fa lo screenshot con le sfocature già nei pixel e ti offre sul risultato la cornice della finestra del browser, lo sfondo, i margini e gli angoli.
- Sfocare nella pagina è gratis e senza limiti.
- Il piano gratuito include 5 screenshot; Premium toglie il limite.
- L’immagine viene creata nel browser e non viene mai caricata.
Aggiungi a Chrome
Si installa gratis su Chrome, da computer.
Sfondo per screenshotSfumature, margini, angoli e ombra per qualsiasi screenshot, senza bisogno di cornice. Scrivere su uno screenshotAggiungi frecce, riquadri, testo ed evidenziatore prima di incorniciarlo. Censurare una fotoCopri, sfoca o pixella qualsiasi dato privato in uno screenshot che hai già fatto.
Come funziona
Come creare un mockup browser
Quattro passaggi, un minuto circa, senza programmi di grafica.
- 1
Aggiungi lo screenshot
Trascina sull’anteprima uno screenshot del tuo prodotto, incollalo con Ctrl+V (Cmd+V su Mac), oppure premi Scegli immagine. Fino ad allora vedi una pagina di esempio.
- 2
Scegli la cornice del browser
Chrome su macOS o Windows, una barra di browser macOS o Windows, una semplice finestra macOS o Windows oppure nessuna cornice. Imposta il tema chiaro, scuro o automatico per abbinarlo alla parte alta dello screenshot.
- 3
Scrivi l’URL e il titolo della scheda
Scrivi nella barra degli indirizzi l’indirizzo che vuoi, per esempio iltuoprodotto.com/prezzi, e un titolo della scheda per la cornice Chrome. Non deve essere un URL reale e attivo.
- 4
Imposta la tela ed esporta
Aggiungi sfondo, margini, angoli e ombra, scegli una dimensione come 16:9 o 1:1, poi scarica un PNG, JPEG o WebP a piena risoluzione o copialo negli appunti.
Dove serve
Immagini di prodotto che dicono subito “app web”
Uno screenshot nudo è un rettangolo di interfaccia. Lo stesso screenshot dentro la cornice di un browser fa capire dove si trova e che tipo di prodotto è.
Post di lancio e gallerie
Le gallerie di Product Hunt, i post di lancio e quelli del changelog mostrano un prodotto meglio nel suo contesto che come ritaglio. Scegli 16:9 o 1.91:1 così la cornice non viene tagliata nell’anteprima.
Documentazione e guide
Una cornice del browser con il percorso vero nella barra degli indirizzi dice a chi legge in quale pagina avviene un passaggio, cosa che un pannello ritagliato non può fare.
Social e presentazioni
I formati per X, LinkedIn, post e verticali di Instagram, storie e Dribbble allargano la tela alle proporzioni senza tagliare lo screenshot.
Le cornici
Sei cornici di browser e finestre
Ognuna viene disegnata con forme piatte alla risoluzione dello screenshot, chiara o scura, così resta nitida anche su una cattura Retina.
- Chrome su macOS
- Una barra delle schede con i tre pallini della finestra e una scheda (favicon, titolo, chiusura) sopra una barra con avanti, indietro, ricarica e barra degli indirizzi. La cornice più riconoscibile per un’app web.
- Chrome su Windows
- La stessa barra delle schede e la stessa barra degli strumenti, con riduci, ingrandisci e chiudi all’estremità destra della barra delle schede: Chrome come lo vede la maggior parte delle persone.
- Browser macOS
- I tre pallini della finestra con un campo indirizzo centrato, simile alla barra del titolo di Safari.
- Browser Windows
- Un campo indirizzo a sinistra e i pulsanti riduci, ingrandisci e chiudi a destra.
- Finestra macOS
- I pallini della finestra e un titolo facoltativo, senza barra degli indirizzi: per le app desktop o quando l’URL non deve vedersi.
- Finestra Windows
- Una semplice barra del titolo con riduci, ingrandisci e chiudi a destra: per le app Windows, senza URL.
FAQ
Domande sul mockup browser
Come creare un mockup di un sito web da uno screenshot?
Fai uno screenshot della pagina, trascinalo nello strumento qui sopra, scegli una cornice (Chrome con scheda, browser macOS o Windows) e scrivi l’URL nella barra degli indirizzi. Poi aggiungi sfondo e margini se servono e scarica il PNG. È gratuito, senza account, senza filigrana e senza limiti.
Posso cambiare l’URL e il titolo della scheda?
Sì. Scrivi qualsiasi indirizzo nel campo Indirizzo e qualsiasi testo in Titolo della scheda (cornice Chrome). Vengono disegnati nella cornice, quindi puoi mostrare una pagina di staging sotto il dominio di produzione, o un percorso corto e ordinato.
Il PNG ha lo sfondo trasparente?
Sì, se imposti lo sfondo su Nessuno ed esporti in PNG o WebP: la zona intorno alla finestra e gli angoli arrotondati restano trasparenti. Il JPEG non supporta la trasparenza, quindi quella zona diventa bianca.
Lo screenshot viene caricato da qualche parte?
No. L’immagine viene letta dal tuo dispositivo e disegnata su un canvas in questa pagina. Non viene mai inviata a un server né salvata, quindi le schermate di un prodotto non ancora uscito restano private.
Funziona con gli screenshot in modalità scura?
Sì. Con il tema della cornice su Automatico, lo strumento legge la parte alta dello screenshot e sceglie una cornice chiara o scura abbinata. Puoi anche forzare Chiaro o Scuro.
Che differenza c’è con lo strumento per lo sfondo degli screenshot?
Stesso motore, punto di partenza diverso. Lo strumento per lo sfondo parte da uno sfondo sfumato senza cornice, per uno screenshot curato. Questa pagina parte dalla cornice del browser e mette in primo piano URL, titolo della scheda e stile della cornice, per le immagini di prodotto.
Come tenere i dati dei clienti fuori da un mockup di prodotto?
Sfocali nella pagina aperta prima di fare lo screenshot. L’estensione Blurr.ing per Chrome sfoca qualsiasi nome, email o numero in una pagina web, poi la sua scorciatoia di cattura fa lo screenshot con le sfocature già nei pixel e offre anche la cornice della finestra del browser. Il piano gratuito include 5 screenshot.