Hero van je landingspagina
Een screenshot in een browserframe zegt in één oogopslag: dit is een webapp. Met een transparante achtergrond (PNG of WebP) zet je hem op elke sectiekleur.
Browser mockup maken van je eigen screenshot
Browser mockup maken zonder ontwerpprogramma: zet je productscreenshot in een frame van Chrome, macOS of Windows met je eigen URL en tabtitel, en sla hem op voor een landingspagina, een lanceringspost of je documentatie. Schermen die nog niet live zijn, worden nooit geüpload.
- Je eigen URL en tabtitel
- Nooit geüpload
- Geen watermerk
Browser mockup
Voorbeeld laden
Voorbeeldscreenshot· sleep hierheen, of plak met CtrlV
Resultaat 0 × 0 px· blijft op dit apparaat
Plakken CtrlVDownloaden CtrlS
Blijft op je apparaat. Je bestand wordt hier in dit browsertabblad verwerkt. Er wordt niets geüpload, opgeslagen of verstuurd.
Bijgewerkt in oktober 2026
Kort antwoord
Een browser mockup maak je door je screenshot in de tool hierboven te zetten, een browserframe te kiezen en de URL te typen die in de adresbalk moet staan. Voeg een achtergrond en marge toe als de mockup op een drukke pagina komt, kies een formaat zoals 16:9 voor een post en download een PNG. Zet de achtergrond op Geen voor een transparante mockup die je op elke kleur kunt plaatsen.
Privégegevens weg vóór de mockup
Echt product, geen echte klanten in beeld
De beste productscreenshots komen uit de echte app, en die staat vol echte namen, e-mailadressen en omzetcijfers. De Chrome-extensie van Blurr.ing vervaagt dat allemaal in de live pagina, waarna de sneltoets voor screenshots de opname maakt met de vervagingen al in de pixels en je een browservenster, achtergrond, marge en hoeken op het resultaat geeft.
- Vervagen in de pagina is gratis en onbeperkt.
- Het gratis abonnement heeft 5 screenshots; met Premium is er geen limiet.
- De afbeelding wordt in je browser gemaakt en nooit geüpload.
Toevoegen aan Chrome
Gratis te installeren, voor Chrome op je computer.
Screenshot op een achtergrondVerlopen, marge, hoeken en schaduw voor elke screenshot, zonder frame. Screenshot bewerkenZet er pijlen, kaders, tekst en markeringen op voordat je hem in een frame zet. Foto censurerenZet een zwart vlak over alles wat privé is in een screenshot die je al hebt, of vervaag of verpixel het.
Zo werkt het
Zo maak je een browser mockup
Vier stappen, ongeveer een minuut, geen ontwerpprogramma.
- 1
Voeg je screenshot toe
Sleep een screenshot van je product naar het voorbeeld, plak hem met Ctrl+V (Cmd+V op een Mac) of klik op Afbeelding kiezen. Tot die tijd zie je een voorbeeldpagina.
- 2
Kies het browserframe
Kies Chrome op macOS of Windows, een browserbalk van macOS of Windows, een gewoon venster van macOS of Windows of geen frame. Zet het thema op licht, donker of automatisch, zodat het past bij de bovenkant van je screenshot.
- 3
Typ de URL en tabtitel
Typ het adres dat in de adresbalk moet staan, zoals jouwproduct.nl/prijzen, en een tabtitel voor het Chrome-frame. Het hoeft geen echte, bestaande URL te zijn.
- 4
Stel het canvas in en sla op
Voeg een achtergrond, marge, hoeken en schaduw toe, kies een formaat zoals 16:9 of 1:1, en download een PNG, JPEG of WebP op volledige resolutie of kopieer hem naar het klembord.
Waarvoor
Productbeelden waarop je meteen ziet dat het een webapp is
Een losse screenshot is een rechthoek met interface. Dezelfde screenshot in een browserframe laat zien waar hij draait en wat voor product het is.
Lanceringsposts en galerijen
Galerijen op Product Hunt, lanceringsposts en changelogs laten een product beter zien in context dan als losse uitsnede. Kies 16:9 of 1.91:1, dan wordt het frame in het voorbeeld niet afgesneden.
Documentatie en helpartikelen
Een browserframe met het echte pad in de adresbalk vertelt de lezer precies op welke pagina een stap gebeurt, en dat kan een uitgesneden paneel niet.
Social media en presentaties
Formaten voor X, LinkedIn, Instagram-posts en staande posts, stories en Dribbble laten het canvas meegroeien naar de verhouding zonder je screenshot bij te snijden.
De frames
Zes browser- en vensterframes
Elk frame wordt als vlakke vormen getekend op de resolutie van je screenshot, licht of donker, dus het blijft scherp op een Retina-opname.
- Chrome op macOS
- Een tabbladbalk met de drie vensterknopjes en één tabblad (favicon, titel, sluiten) boven een werkbalk met terug, vooruit, vernieuwen en de adresbalk. Het herkenbaarste webapp-frame.
- Chrome op Windows
- Dezelfde tabbladbalk en werkbalk, met minimaliseren, maximaliseren en sluiten helemaal rechts in de tabbladbalk. Zo zien de meeste mensen Chrome.
- macOS-browser
- De drie vensterknopjes met een gecentreerd adresveld, vergelijkbaar met de titelbalk van Safari.
- Windows-browser
- Een adresveld links en de knoppen voor minimaliseren, maximaliseren en sluiten rechts.
- macOS-venster
- Vensterknopjes en een titel naar keuze, geen adresbalk: voor desktopapps of als de URL niet in beeld mag.
- Windows-venster
- Een eenvoudige titelbalk met minimaliseren, maximaliseren en sluiten rechts: voor Windows-apps, zonder URL.
FAQ
Browser mockup: veelgestelde vragen
Is deze tool gratis?
Ja. Gratis, zonder account, zonder watermerk en zonder limiet op het aantal mockups. Hij draait volledig in je browser.
Wordt mijn screenshot geüpload?
Nee. De afbeelding wordt van je apparaat gelezen en op een canvas in deze pagina getekend. Hij wordt nooit naar een server gestuurd en nooit bewaard, dus schermen die nog niet live zijn blijven privé.
Kan ik de URL en tabtitel aanpassen?
Ja. Typ een willekeurig adres in het veld Adres en een tekst in Tabtitel (Chrome-frame). Ze worden in het frame getekend, dus je kunt een testomgeving onder je echte domein laten zien, of een kort, netjes pad.
Kan ik een mockup met een transparante achtergrond maken?
Ja. Zet Achtergrond op Geen en sla op als PNG of WebP: het stuk rond het venster en de ronde hoeken blijven transparant. JPEG kent geen transparantie, dus daar wordt dat stuk wit.
Werkt het met een donkere screenshot?
Ja. Met het framethema op Auto leest de tool de bovenkant van je screenshot en kiest hij een licht of donker frame dat erbij past. Je kunt ook zelf Licht of Donker kiezen.
Wat is het verschil met de tool screenshot op een achtergrond?
Dezelfde techniek, een ander vertrekpunt. De achtergrondtool begint met een verloop en geen frame, voor een verzorgde screenshot. Deze pagina begint met een browserframe en zet URL, tabtitel en framestijl voorop, voor productbeelden.
Hoe houd ik klantgegevens uit een mockup?
Vervaag ze in de live pagina voordat je de screenshot maakt. De Chrome-extensie van Blurr.ing vervaagt elke naam, elk e-mailadres of nummer op een webpagina, waarna de sneltoets voor screenshots de opname maakt met de vervagingen al in de pixels, ook met een browservenster eromheen. Het gratis abonnement heeft 5 screenshots.