Was ist ein Device-Mockup?

Ein Device-Mockup ist ein realistischer Rahmen – ein iPhone, Android-Smartphone, Tablet oder MacBook – um einen Screenshot oder ein Design herum, sodass es aussieht, als liefe es auf einem echten Gerät. Mockups machen Interface-Arbeit greifbar: Ein flacher Screenshot auf einer Folie wird leicht übersehen, derselbe Screen in einem Telefonrahmen wirkt sofort wie „ein echtes Produkt“. Designer nutzen sie für Portfolios, App-Store-Bilder, Pitch-Decks, Landingpages und Social-Posts.

Warum ein reines CSS-Mockup?

Die meisten Mockups sind schwere PNG- oder PSD-Dateien – langsam zu laden und umständlich umzufärben. Dieser Generator erzeugt stattdessen einen reinen CSS-Geräterahmen – keine Bilder, keine externen Bibliotheken. Das heißt: gestochen scharf bei jedem Zoom, quasi kein Gewicht, und direkt in eine Webseite einsetzbar. Du steuerst jedes Detail live:

Gerätetyp – iPhone, Android, iPad, generisches Tablet oder MacBook.
Ausrichtung, Größe und Rotation – Hoch- oder Querformat, skaliert und geneigt nach Wunsch.
Rahmen- und Bildschirmfarbe – inklusive optionalem Zwei-Farben-Verlauf.
Details – Notch/Kamera-Ausschnitt, Seitentasten, Home-Indikator, Schlagschatten und eine Glas-Reflexion.

So nutzt du den Generator

Wähle oben im Bedienfeld Gerät und Ausrichtung.
Passe Größe, Rotation und Farben an, bis der Rahmen in der Live-Vorschau stimmt.
Schalte die gewünschten Details ein (Notch, Tasten, Schatten, Reflexion).
Kopiere das erzeugte CSS in dein Projekt – und platziere deinen Screenshot im Rahmenelement.

Typische Einsätze

Ein Device-Mockup lohnt sich immer, wenn ein Screen Kontext braucht: App-Landingpages, App-Store- und Google-Play-Screenshots, Kundenpräsentationen, Design-Case-Studies, README-Titelbilder und Marketinggrafiken. Kombiniere es mit unserem Bild-Placeholder-Generator für den Bildschirminhalt und dem Lorem-Ipsum-Generator für realistischen Blindtext beim Entwerfen.

Ist der Device-Mockup-Generator kostenlos?

Ja – er ist vollständig kostenlos, benötigt keine Anmeldung und läuft komplett im Browser. Das erzeugte CSS darfst du in jedem Projekt verwenden.

Brauche ich Photoshop oder andere Software?

Nein. Alles passiert im Browser, und die Ausgabe ist reines CSS. Du brauchst nur einen Code-Editor, um es einzufügen.

Darf ich die Mockups kommerziell nutzen?

Ja. Der erzeugte CSS-Rahmen ist frei nutzbar, auch kommerziell. Für die Rechte an dem Screenshot bzw. Inhalt, den du hineinsetzt, bist du selbst verantwortlich.

Welche Geräte werden unterstützt?

iPhone, Android-Smartphones, iPad, ein generisches Tablet und MacBook – jeweils mit einstellbarer Größe, Rotation, Farben und optionalen Details wie Notch, Tasten und Schatten.