Screenshot-Mockup-Tool — Verschönere Deine Screenshots
Lege einen Screenshot ab und erhalte ein schönes Mockup mit Browser-Rahmen, Gradient-Hintergrund, Padding und Schatten. Perfekt für Social Posts, Portfolios und Produktlaunches. PNG-Export.
Screenshot-Mockup-Tool — Verwandle Schlichte Screenshots in Polierte Visuals
Lege einen Screenshot ab und sieh zu, wie er in ein schönes Mockup mit einem Browser-Fensterrahmen, Gradient-Hintergrund, weichem Schatten und abgerundeten Ecken verwandelt wird — die Art von Visual, das du überall auf X, LinkedIn und Produktlaunch-Seiten siehst. Passe jeden Parameter an und exportiere ein hochauflösendes PNG. Alles wird live mit HTML-Canvas in deinem Browser zusammengesetzt.
Was du tun kannst
- Browser-Rahmen: umrahme deinen Screenshot mit einem realistischen Fenster im macOS-Stil mit Ampelknöpfen und URL-Leiste (heller oder dunkler Modus)
- Telefon-Rahmen: zeige App-Screenshots in einem sauberen Telefonrahmen mit Notch und Home-Indicator
- Kein Rahmen: nur abgerundete Ecken + Schatten + Hintergrund, für saubere Produktaufnahmen
- 12 Gradient-Hintergründe: von weichen Pastelltönen bis zu kräftigen dunklen Tönen
- Padding, Eckenradius und Schatten: drei Schieberegler zur Feinabstimmung der Komposition
- Benutzerdefinierter URL-Leistentext: zeige deine echte Domain
- PNG-Export: hochauflösende Ausgabe bereit zum Teilen
Perfekt für
- Social-Media-Posts (X, LinkedIn, Instagram, Threads), die im Feed auffallen sollen
- Produktlaunch-Seiten und Hero-Bilder von Landingpages
- Dokumentation und Tutorials, wo flache Screenshots langweilig wirken
- Portfolios und Fallstudien, wo Präsentation wichtig ist
- Newsletter-Banner und E-Mail-Visuals
So funktioniert es
Das Bild wird komplett auf einem HTML-<canvas> zusammengesetzt: der Gradient-Hintergrund, die abgerundete Clipping-Maske, die Browser-Chrome im macOS-Stil mit Ampelknöpfen und URL-Pille, der Schatten und dein Screenshot darüber gezeichnet — alles mathematisch in Pixeln zusammengefügt. Das Ergebnis ist eine einzelne PNG-Datei, die du herunterladen und überall verwenden kannst.
Tipps
- Für Social Posts sehen großzügiges Padding (80–120 px) und ein kräftiger Gradient am besten aus
- Verwende die dunkle Leiste für Screenshots im Nachtmodus
- Der Telefonrahmen funktioniert am besten mit Hochformat-Screenshots (mobile Apps)
- Füge einen echten Schatten hinzu, aber halte ihn dezent — 25 bis 40 auf dem Schieberegler ist meist ideal
Datenschutz
Dein Screenshot verlässt nie dein Gerät. Die gesamte Komposition und der Export erfolgen lokal — nichts wird hochgeladen.
Schritt für Schritt
- Ziehen Sie einen Screenshot (PNG oder JPG) in das Feld.
- Wählen Sie den Hintergrund, den Rahmen-Stil (Browser-Fenster, Telefon oder kein Rahmen) und stellen Sie Abstand, Eckenradius und Schatten ein.
- Laden Sie das fertige Bild mit PNG herunterladen herunter.
Häufige Fragen
Wofür sind solche Mockups gut?
Für Beiträge in sozialen Netzwerken, Portfolios, Produktseiten, Präsentationen und Dokumentationen.
Kann ich die Browser-Leiste anpassen?
Ja. Sie können die URL-Leiste anzeigen und zwischen heller und dunkler Leiste wählen.
Bleibt mein Screenshot privat?
Ja. Das Bild wird nur in Ihrem Browser verarbeitet.