Screenshot-Mockup-Generator

Setze jeden Screenshot in einen Browserrahmen oder ein macOS-Fenster, auf dieselben Hintergründe wie in der Snapix-App, und exportiere ihn in der exakten Größe jeder Plattform.

So setzt du einen Screenshot in einen Browserrahmen

Drei Schritte – und alles passiert in deinem Browser.

Screenshot hinzufügen

Lege ihn im Feld oben ab, füge ihn mit ⌘V ein oder klicke, um eine Datei auszuwählen – er wird sofort eingerahmt. Tippe oben auf das Feld und wähle einen Screenshot aus deinen Fotos – er wird sofort eingerahmt.

Mockup gestalten

Wähle einen Browserrahmen oder ein Mac-Fenster, gib einen eigenen Titel oder eine URL ein, wähle dann einen Farbverlauf, ein Bild oder eine Farbe und stelle Abstand, Schatten und Ecken ein.

Kopieren oder herunterladen

Kopiere das fertige Mockup in die Zwischenablage oder lade es herunter – schon in der passenden Größe für LinkedIn, X, Instagram oder deine Linkvorschau.

Rahmen

Browserrahmen, Mac-Fenster oder gar kein Rahmen

Ein Rahmen zeigt auf einen Blick, worum es geht – noch bevor jemand ein Wort liest: eine Live-Website, eine Mac-App oder einfach ein sauberes Bild. Alle drei werden als Vektorpfade gezeichnet und bleiben deshalb in jeder Exportgröße scharf.

BrowserrahmenFür Websites und Web-Apps – ein schlichtes Fenster im Safari-Stil mit einem Adressfeld, in das du jede beliebige URL eintippen kannst.
Mac-FensterFür native Mac-Apps – mit den drei farbigen Fenstertasten und einem bearbeitbaren Fenstertitel, hell oder dunkel, passend zu deinem Screenshot.
Ohne RahmenNur Hintergrund, Abstand, Schatten und abgerundete Ecken – genau richtig für Handy-Screenshots und Mac-Aufnahmen, die schon eigene Ecken haben.

Derselbe Screenshot auf drei Arten: in einem Browserrahmen im Safari-Stil mit bearbeitbarer Adresse, in einem macOS-Fenster mit farbigen Fenstertasten und Titel und als schlichter Screenshot mit abgerundeten Ecken – jeweils auf eigenem Farbverlauf

Dein Look

Hintergrund und Bildunterschrift hinzufügen

Der Hintergrund trägt am meisten dazu bei, dass ein Screenshot fertig aussieht, und ein Social-Media-Post braucht meist noch eine Zeile Text dazu. Hier erledigst du beides und lädst ein einziges Bild herunter – ohne zweites Tool.

22 Farbverläufe aus der Snapix-App – oder einer, der aus den Farben deines Screenshots entsteht
Bilder mit einstellbarer Unschärfe, 17 Farben oder ein transparenter Hintergrund
Einen Look als Vorlage speichern und beim nächsten Screenshot wiederverwenden
Text in sechs fertigen Stilen und 36 Schriften, als scharfe Vektoren gezeichnet
Alles an seinen Platz ziehen – es rastet an Hilfslinien ein und ⌘Z macht jeden Schritt rückgängig

Mache E-Mail-Adressen und Namen unkenntlich, bevor du etwas einrahmst – mit unserem Tool „Screenshot beschriften“ geht das direkt im Browser.

Ein Screenshot im Browserrahmen, zentriert auf einem indigoblauen Farbverlauf, darüber eine fette Bildunterschrift, die gerade bearbeitet wird, beide mit Eckgriffen, und eine gestrichelte Hilfslinie, die die Mitte markiert

Exportgrößen

Die richtige Größe für jede Plattform

„Automatisch“ passt die Arbeitsfläche an das Mockup an – genau das, was Dokumentationen und Changelogs brauchen. Wählst du stattdessen ein Seitenverhältnis wie 16:9, 1:1 oder 9:16, wächst die Arbeitsfläche um deinen Screenshot herum – er wird nie beschnitten und nie verzerrt – und du ziehst ihn dorthin, wo du ihn auf der Arbeitsfläche haben willst.

Das Menü „Größe“ enthält eine Vorgabe für jeden Ort, an dem ein Produkt-Screenshot landet: Posts auf LinkedIn, X, Reddit und Instagram, Galerien auf Product Hunt, YouTube-Thumbnails und Social-Media-Vorschauen auf GitHub. Jede Vorgabe exportiert in den exakten Pixeln der Plattform – die Datei, die du herunterlädst, ist also genau die, die du hochlädst.

Das Tool ist auch ein Open-Graph-Bildgenerator: Die Vorgabe „Linkvorschau“ exportiert die Karte in 1200 × 630, die Facebook, LinkedIn, Slack und Discord aus dem og:image-Tag deiner Seite erzeugen.

Kleine JPGs – oder PNG, wenn der Hintergrund transparent ist
Eigene Größen von 100 bis 8000 px
Transparente PNGs passen direkt auf Folien und in Präsentationen

Exportvorgaben in ihren echten Proportionen: ein 16:9-Postformat für LinkedIn, X und Reddit mit einem eingerahmten Mockup, Instagram quadratisch und im Hochformat, Karten für GitHub und Product Hunt und eine Linkvorschau in 1200 × 630

Häufige Fragen

Ist dieser Mockup-Generator kostenlos und fügt er ein Wasserzeichen hinzu?

Er ist komplett kostenlos – ohne Wasserzeichen, ohne Anmeldung und ohne Exportlimit. Alles wird direkt auf der Seite in einem Canvas-Element gezeichnet, deshalb gibt es keinen Upload und kein Warten auf einen Server. Mit diesen Web-Tools stellen wir Snapix vor, unsere Screenshot-App für macOS.

Kann ich die URL und den Fenstertitel ändern?

Ja. Der Browserrahmen im Safari-Stil hat ein bearbeitbares Adressfeld, das Mac-Fenster einen bearbeitbaren Titel. Der Text wird beim Tippen neu auf die Arbeitsfläche gezeichnet, sodass alles, was du schreibst, als Teil des Bildes exportiert wird.

Welche Hintergründe kann ich verwenden?

Dieselbe Auswahl wie im Snapix-Editor: 22 Farbverläufe, von schlichten zweifarbigen Übergängen bis zu weichen Mesh-Verläufen, 17 Farben, ein Farbverlauf aus den Farben deines Screenshots, eine weichgezeichnete Kopie des Screenshots selbst oder ein eigenes Bild mit einstellbarer Unschärfe. Ohne Hintergrund exportierst du ein transparentes PNG.

Kann ich dem Mockup Text oder eine Bildunterschrift hinzufügen?

Ja. Ziehe einen der sechs Stile aus dem Tab „Text“ auf die Arbeitsfläche – oder drücke T – und tippe direkt in die Vorschau. Du hast 36 Schriften zur Auswahl, Bildunterschriften werden in jeder Größe als scharfe Vektoren exportiert und ⌘Z macht jeden Schritt rückgängig.

Welche Social-Media-Größen kann ich exportieren?

Das Menü „Größe“ enthält neun Seitenverhältnisse und neun Plattformgrößen: Posts für LinkedIn, X und Reddit in 1920 × 1080, Instagram quadratisch und im Hochformat, Product-Hunt-Galerie, YouTube-Thumbnail, GitHub-Vorschau und die Linkvorschau in 1200 × 630. Jede Plattformgröße exportiert in den exakten Pixeln und „Eigene Größe“ nimmt jede Größe von 100 bis 8000 px an.

Wie groß sollte ein Open-Graph-Bild sein?

1200 × 630 Pixel – das ist hier die Größe „Linkvorschau“. Diese Größe verlangt Facebook in seiner Dokumentation zum Teilen. Slack, Discord, Bluesky, LinkedIn und Reddit lesen dasselbe og:image-Tag – ein Export deckt also alle ab.

Exportiert das Tool ein JPG oder ein PNG?

Es entscheidet für dich. Ein Mockup mit Hintergrund wird als JPG mit 92 % Qualität heruntergeladen – mit bloßem Auge kaum von einem PNG zu unterscheiden und nur ein Bruchteil so groß. Ohne Hintergrund wird es als PNG heruntergeladen, weil nur PNG die Transparenz erhält. „Kopieren“ legt immer ein PNG in die Zwischenablage.

Saubere Fensteraufnahmen mit einem Tastendruck

Die Fensteraufnahme von Snapix (⌘⇧5) nimmt jedes Mac-Fenster sauber auf und zeigt dir dabei live, was genau im Bild landet – und der Editor setzt die Aufnahme auf dieselben Hintergründe, mit Vorlagen, die du auf jede Aufnahme anwenden kannst.

Für Mac herunterladen

Screenshot-Mockup-Generator