Hero der Landingpage
Ein Screenshot im Browserrahmen ist auf den ersten Blick als Web-App zu erkennen. Mit transparentem Hintergrund (PNG oder WebP) passt er auf jede Abschnittsfarbe.
Browser Mockup Generator für deine Screenshots
Der Browser Mockup Generator setzt deinen Produkt-Screenshot in einen Browserrahmen von Chrome, macOS oder Windows, mit eigener URL und eigenem Tab-Titel, fertig für Landingpage, Launch-Post oder Dokumentation. Unveröffentlichte Screens werden nie hochgeladen.
- Eigene URL und Tab-Titel
- Kein Upload
- Ohne Wasserzeichen
Browser Mockup
Beispiel wird geladen
Beispiel-Screenshot· hineinziehen oder mit CtrlV einfügen
Ausgabe 0 × 0 px· bleibt auf diesem Gerät
Einfügen CtrlVHerunterladen CtrlS
Bleibt auf deinem Gerät. Deine Datei wird direkt hier in diesem Browser-Tab verarbeitet. Nichts wird hochgeladen, gespeichert oder versendet.
Stand: Oktober 2026
Kurz gesagt
Für ein Browser-Mockup ziehst du deinen Screenshot oben ins Tool, wählst einen Browserrahmen und tippst die gewünschte URL in die Adressleiste. Steht das Mockup auf einer unruhigen Seite, füg Hintergrund und Abstand hinzu; für einen Post wählst du eine Größe wie 16:9 und lädst ein PNG herunter. Mit dem Hintergrund Keiner bekommst du ein transparentes Mockup für jede Hintergrundfarbe.
Private Daten vor dem Mockup verbergen
Echtes Produkt, keine echten Kunden im Bild
Die besten Produkt-Screenshots kommen aus der echten App, und die ist voller echter Namen, E-Mails und Umsätze. Die Chrome-Erweiterung Blurr.ing macht all das in der geöffneten Seite unkenntlich; ihre Aufnahme hält den Screenshot dann mit den Blurs schon in den Pixeln fest und bietet Browserrahmen, Hintergrund, Abstand und Ecken für das Ergebnis.
- Unkenntlich machen in der Seite ist kostenlos und unbegrenzt.
- Der kostenlose Plan enthält 5 Screenshots, Premium hebt die Grenze auf.
- Das Bild entsteht in deinem Browser und wird nie hochgeladen.
Zu Chrome hinzufügen
Kostenlos installieren. Läuft in Chrome am Computer.
Screenshot Hintergrund hinzufügenFarbverläufe, Abstand, Ecken und Schatten für jeden Screenshot, auch ohne Rahmen. Screenshot beschriftenPfeile, Rahmen, Text und Textmarker setzen, bevor du das Mockup baust. Bild schwärzenAlles Private in einem fertigen Screenshot schwärzen, weichzeichnen oder verpixeln.
So funktioniert’s
So erstellst du ein Browser-Mockup
Vier Schritte, etwa eine Minute, ohne Design-Programm.
- 1
Screenshot hinzufügen
Zieh einen Screenshot deines Produkts auf die Vorschau, füg ihn mit Strg+V (Cmd+V auf dem Mac) ein oder klick auf Bild auswählen. Bis dahin ist eine Beispielseite zu sehen.
- 2
Browserrahmen wählen
Wähl Chrome unter macOS oder Windows, eine Browserleiste von macOS oder Windows, ein schlichtes Fenster von macOS oder Windows oder keinen Rahmen. Das Design stellst du auf Hell, Dunkel oder Auto, passend zum oberen Rand deines Screenshots.
- 3
URL und Tab-Titel eintragen
Tipp die gewünschte Adresse in die Adressleiste, etwa deinprodukt.de/preise, und für den Chrome-Rahmen einen Tab-Titel. Die URL muss nicht echt oder erreichbar sein.
- 4
Fläche einstellen und exportieren
Füg Hintergrund, Abstand, Ecken und Schatten hinzu, wähl eine Größe wie 16:9 oder 1:1 und lade ein PNG, JPEG oder WebP in voller Auflösung herunter oder kopier es in die Zwischenablage.
Wofür
Produktbilder, die sofort nach Web-App aussehen
Ein nackter Screenshot ist ein Rechteck voller Oberfläche. Derselbe Screenshot im Browserrahmen zeigt, wo er zu Hause ist und was für ein Produkt das ist.
Launch-Posts und Galerien
Product-Hunt-Galerien, Launch-Posts auf X und Changelog-Beiträge zeigen ein Produkt im Kontext besser als einen nackten Ausschnitt. Wähl 16:9 oder 1.91:1, damit der Rahmen in der Vorschau nicht abgeschnitten wird.
Dokumentation und Hilfeartikel
Ein Browserrahmen mit dem echten Pfad in der Adressleiste zeigt dem Leser genau, auf welcher Seite ein Schritt passiert. Ein ausgeschnittenes Panel kann das nicht.
Social Media und Folien
Größen für X, LinkedIn, Instagram-Posts im Quer- und Hochformat, Storys und Dribbble vergrößern die Fläche auf das Format, ohne deinen Screenshot zu beschneiden.
Die Rahmen
Sechs Browser- und Fensterrahmen
Jeder wird als flache Form in der Auflösung deines Screenshots gezeichnet, hell oder dunkel, und bleibt so auch bei einer Retina-Aufnahme scharf.
- Chrome unter macOS
- Eine Tab-Leiste mit den drei farbigen Fensterknöpfen und einem Tab (Favicon, Titel, Schließen) über einer Symbolleiste mit Zurück, Vor, Neu laden und Adressleiste. Der Rahmen, der am deutlichsten „Web-App“ sagt.
- Chrome unter Windows
- Dieselbe Tab-Leiste und Symbolleiste, mit Minimieren, Maximieren und Schließen ganz rechts in der Tab-Leiste. So sehen die meisten Leute Chrome.
- macOS-Browser
- Die drei farbigen Fensterknöpfe mit einem mittigen Adressfeld, nah an einer Titelleiste im Safari-Stil.
- Windows-Browser
- Ein Adressfeld links und die Symbole für Minimieren, Maximieren und Schließen rechts.
- macOS-Fenster
- Fensterknöpfe und ein optionaler Titel, keine Adressleiste: für Desktop-Apps oder wenn die URL nicht zu sehen sein soll.
- Windows-Fenster
- Eine schlichte Titelleiste mit Minimieren, Maximieren und Schließen rechts: für Windows-Programme, ohne URL.
FAQ
Browser Mockup: häufige Fragen
Wie setze ich einen Screenshot in ein Browserfenster?
Zieh den Screenshot oben ins Tool, wähl unter Browserrahmen Chrome mit Tab, den macOS- oder den Windows-Browser und trag Adresse und Tab-Titel ein. Dann herunterladen oder kopieren.
Kann ich die URL und den Tab-Titel ändern?
Ja. Tipp eine beliebige Adresse ins Feld Adresse und einen beliebigen Text in Tab-Titel (beim Chrome-Rahmen). Beides wird in den Rahmen gezeichnet, so kannst du eine Staging-Seite unter deiner echten Domain zeigen oder einen kurzen, aufgeräumten Pfad.
Bekomme ich ein PNG mit transparentem Hintergrund?
Ja. Stell den Hintergrund auf Keiner und exportier PNG oder WebP: Die Fläche um das Fenster und seine runden Ecken bleibt transparent. JPEG kennt keine Transparenz, dort wird sie weiß.
Brauche ich Figma oder Photoshop dafür?
Nein. Der Generator läuft im Browser, du brauchst weder ein Design-Programm noch eine Vorlage. Es ist kostenlos, ohne Konto, ohne Wasserzeichen und ohne Limit.
Wird mein Screenshot irgendwo hochgeladen?
Nein. Das Bild wird von deinem Gerät gelesen und in dieser Seite auf ein Canvas gezeichnet. Es geht nie an einen Server und wird nie gespeichert, unveröffentlichte Produkt-Screens bleiben also privat.
Funktioniert das mit Screenshots im Dark Mode?
Ja. Steht das Rahmen-Design auf Auto, liest es den oberen Rand deines Screenshots und wählt einen hellen oder dunklen Rahmen dazu. Du kannst auch Hell oder Dunkel erzwingen.
Was ist der Unterschied zum Tool Screenshot Hintergrund?
Dieselbe Technik, ein anderer Ausgangspunkt. Das Hintergrund-Tool startet mit einem Farbverlauf ohne Rahmen, für einen hübschen Screenshot. Diese Seite startet mit einem Browserrahmen und stellt URL, Tab-Titel und Rahmenstil nach vorne, für Produktbilder.
Wie halte ich Kundendaten aus einem Produkt-Mockup heraus?
Mach sie in der geöffneten Seite unkenntlich, bevor du den Screenshot aufnimmst. Die Chrome-Erweiterung Blurr.ing macht jeden Namen, jede E-Mail und jede Nummer auf einer Webseite unkenntlich; ihre Aufnahme hält den Screenshot mit den Blurs in den Pixeln fest und bietet ebenfalls einen Browserrahmen. Der kostenlose Plan enthält 5 Screenshots.