Screenshot schöner machen (mit Hintergrund, Rahmen und Schatten)

Um einen Screenshot schöner zu machen, öffne ihn im Editor der kostenlosen Erweiterung Scrollshot, klicke auf Hintergrund, wähle einen Farbverlauf, such einen Browser-, Phone- oder Macbook-Rahmen aus und stell die Regler Abstand und Schatten ein, bis es passt. Dann herunterladen oder kopieren. Der Screenshot selbst bleibt unangetastet, Farbe, Rahmen und Schatten werden nur drumherum gelegt. Alles passiert in deinem Browser, und nichts wird hochgeladen.

Warum ein einfacher Screenshot einfach aussieht

Ein nackter Screenshot endet genau dort, wo die Seite endet. Seine Kanten verschmelzen mit allem, worauf du ihn einfügst, nichts verrät dem Betrachter, ob es eine Website, eine App oder ein Handy ist, und er hat das optische Gewicht eines Haftnotizzettels. Leg ihn auf eine Farbe, gib ihm einen Rahmen, der sagt das ist ein Browserfenster, füge einen weichen Schatten hinzu, damit er sich vom Untergrund löst, und dasselbe Bild wirkt plötzlich gestaltet. Du brauchst kein Designwissen, es sind ein paar Klicks.

So fügst du einem Screenshot Hintergrund, Rahmen und Schatten hinzu, Schritt für Schritt

Installiere Scrollshot. Hol es dir im Chrome Web Store. Es ist kostenlos und braucht kein Konto.
Öffne dein Bild im Editor. Nimm eine Seite auf (ganze Seite, sichtbarer Bereich, Ausschnitt oder Element) oder klicke auf Hochladen und öffne ein beliebiges Bild von deinem Computer.
Mach zuerst deine Bearbeitungen. Pfeile und Nummern, Privates unkenntlich machen und Zuschneiden bleiben auf dem Screenshot, und der Hintergrund wird um das Ergebnis gelegt.
Klicke auf Hintergrund im linken Bereich. Beim Auswählen siehst du eine Live-Vorschau.
Wähle einen Hintergrund. Es gibt acht Farbverläufe (Lila, Pfirsich-Sonnenuntergang, Ozeanblau, Grün, Kirschrot, dunkle Petrol-Nacht, Pink und Gold), zwei einfarbige Flächen (dunkel und hell) und einen runden Knopf für eine eigene Farbe.
Wähle einen Rahmen. None lässt nur das Bild mit sanft abgerundeten Ecken. Browser fügt eine dunkle Titelleiste mit drei Punkten hinzu, Phone ein Handygehäuse mit Kamera-Insel, Macbook einen Laptop-Bildschirm mit Rand und Kinn.
Stell Abstand und Schatten ein. Der Abstand ist der Platz zwischen Bild und Rand der Farbe (0 bis 120). Der Schatten bestimmt, wie stark das Bild darüber schwebt (0 bis 100).
Füg eine Überschrift hinzu, wenn du magst. Wähle das Werkzeug Text und klicke auf den farbigen Hintergrund um das Bild. So kommt schnell ein Titel dazu.
Speichern. Klicke auf Herunterladen oder auf Kopieren, um es direkt in einen Beitrag oder Chat einzufügen. In Verlauf speichern legt es in deiner Galerie ab.

Welcher Hintergrund und welcher Rahmen für welches Bild

Bunte Farbverläufe (Lila, Sonnenuntergang, Ozean, Rose, Gold) wirken am besten auf Social-Media-Beiträgen, Ankündigungen und Landingpages. Warme wirken freundlich, kühle technisch.
Dunkler Verlauf oder einfarbig dunkel passt zu Code, Dashboards und dunklen Oberflächen, weil das Bild nicht mit dem Hintergrund kämpft.
Einfarbig hell ist die ruhige Wahl für Dokumentation, Hilfeartikel und alles, was professionell und leise aussehen soll.
Eigene Farbe lässt dich zu deiner Marke passen. Such die genaue Farbe mit dem runden Knopf aus, und jeder Screenshot passt zu deiner Website.
Browser-Rahmen ist für Webseiten gemacht, mit der dunklen Leiste und den drei Punkten, die jeder sofort erkennt.
Phone-Rahmen gehört zu hohen, schmalen Handy-Screenshots. Eine breite Desktop-Seite in einem Handy sieht falsch aus.
Macbook-Rahmen passt zu Apps, Dashboards und Landingpages, die du auf einem Laptop-Bildschirm zeigen willst.

Ein kleiner Tipp: Der Standard-Abstand ist 48. Für einen Social-Beitrag stell ihn größer ein (80 oder mehr), damit die Farbe Luft hat, und für Dokumentation halte ihn klein (10 bis 24). Ein stärkerer Schatten hilft auf hellen Hintergründen, ein schwächerer auf dunklen.

Ein schnelles Rezept für häufige Aufgaben

Blog oder Hilfeartikel: einfarbig hell oder dunkel, kleiner Abstand, Browser-Rahmen bei einer Webseite. Social-Beitrag (X, LinkedIn): ein kräftiger Verlauf, großzügiger Abstand, mittlerer Schatten und eine kurze Überschrift oben. Landingpage oder Produkt-Header: Macbook-Rahmen für ein Dashboard, Phone-Rahmen für einen Handy-Bildschirm. Folien und Demos: der dunkle Verlauf, weil er sich gut am Beamer lesen lässt. Was du auch wählst, bleib bei einem Stil für eine ganze Bilderreihe, damit sie zusammenpassen.

Wer Screenshots ein Makeover verpasst

Blogger und Autoren von Dokumentation, die saubere, einheitliche Bilder in jedem Beitrag wollen.
Macher und Gründer, die ein neues Feature auf X, LinkedIn oder Product Hunt teilen.
Designer und Entwickler, die laufende Arbeit zeigen, ohne ein Mockup-Werkzeug zu öffnen.
Ersteller von Tutorials und Videos, die Vorschaubilder und Schrittbilder machen.
Support-Teams, deren Anleitungs-Screenshots in einem langen Artikel leicht zu finden sein sollen.

Kombiniere es mit den anderen Werkzeugen: Füge zuerst Pfeile und nummerierte Schritte ein oder bau ein Vorher-Nachher-Bild, bei dem die Nachher-Seite deinen Hintergrund enthält.

Gut zu wissen, bevor du loslegst

Abstand und Schatten brauchen einen Hintergrund. Steht der Hintergrund auf None, bekommt ein Rahmen allein weder Abstand noch Schatten.
Der Rahmen wird um dein Bild gelegt. Er verdeckt nichts, die fertige Datei ist also etwas größer als der Screenshot.
Ohne Rahmen sind die Ecken sanft abgerundet. Das ist der Standardlook, wenn du nur einen Hintergrund wählst.
Text kann auf den Hintergrund. Wähle das Werkzeug Text und klicke auf die Farbe um das Bild.
Es ist kostenlos. Hintergründe, Rahmen, Abstand und Schatten brauchen kein Upgrade und kein Konto.
Chromes eigene Seiten und der Chrome Web Store lassen sich nicht aufnehmen. Probier es auf einer normalen Website.

FAQ

Öffne den Screenshot im Scrollshot-Editor, klicke im linken Bereich auf Hintergrund und wähle einen Farbverlauf oder eine einfarbige Fläche. Die Vorschau aktualisiert sich beim Auswählen.

Wähle im Hintergrund-Bereich unter Frame Browser, Phone oder Macbook. Der Rahmen wird um dein Bild gezeichnet, und du kannst ihn mit einer Hintergrundfarbe kombinieren.

Ja. Der runde Knopf am Ende der Farbfelder öffnet eine Farbauswahl, du kannst also genau zu deiner Marke passen.

Sie wirken nur, wenn ein Hintergrund gewählt ist. Wähle zuerst einen Verlauf oder eine einfarbige Fläche und nutze dann die Regler.

Stell Hintergrund auf None und Frame auf None. Auch Reset im Editor bringt das Bild zurück zum Original.

Ja. Wähle das Werkzeug Text und klicke auf die farbige Fläche um das Bild, um eine Überschrift zu schreiben.

Ja. Alle Hintergründe, Rahmen, Abstand und Schatten sind kostenlos, ohne Konto.

Nein. Scrollshot arbeitet lokal in deinem Browser, dein Screenshot verlässt also nie deinen Computer.

Scrollshot — Erfasse genau, was du brauchst

Gebaut von GetPlugzz. Nur lokale Verarbeitung: nichts wird hochgeladen, nichts wird getrackt.

INSTALLIEREN