Platzhalterbild-Generator

Erstelle Platzhalterbilder in Voreinstellungsgrößen für Social Media, Anzeigen und Thumbnails mit Verlaufs- oder Zufallsfüllung, Diagonal- oder Rastermustern, mehrzeiligen Beschriftungen und @2x-Export.

Tool wird geladen…

Platzhalterbild-Generator — Wähle eine Größe aus gängigen Voreinstellungen für Social Media, Anzeigen und Thumbnails oder gib eine eigene ein, wähle einen einfarbigen, verlaufenden oder zufällig erzeugten Hintergrund und lege ein Diagonal- oder Rastermuster darüber. Füge eine mehrzeilige, frei platzierbare Beschriftung mit eigener Schriftfamilie, -stärke und -größe hinzu und exportiere dann als PNG, JPG, WebP oder SVG – optional in @2x für Retina-Bildschirme. Alles wird in deinem Browser mit den Canvas- und SVG-APIs gezeichnet, sodass nichts, was du eingibst, auf einen Server hochgeladen wird.

Was ist Platzhalterbild-Generator?

Der Platzhalterbild-Generator ist ein kostenloses Browser-Tool für Designer und Frontend-Entwickler, die beim Erstellen von Layouts, Mockups, Anzeigen und Komponentenbibliotheken Füllgrafiken brauchen. Beginne mit einer Voreinstellung wie einem Instagram-Beitrag, einem YouTube-Thumbnail, einer OG-Karte oder einem Anzeigenplatz wie einem 728×90-Leaderboard, oder gib exakte Pixelmaße ein. Gestalte den Hintergrund als einzelne Farbe, zweifarbigen Diagonalverlauf oder zufällige Palette, füge ein Diagonal- oder Rastermuster hinzu und platziere eine mehrzeilige Beschriftung an einer von neun Positionen mit einer Sans-, Serif- oder Monospace-Schrift. Aktiviere die Maß-Überlagerung, um Breite und Höhe in eine Ecke zu stempeln, und exportiere als PNG, JPG, WebP oder kopierbares SVG, mit optionaler @2x-Retina-Skalierung für die Rasterformate.

So verwendest du Platzhalterbild-Generator

  1. Wähle eine Voreinstellungsgröße (Social, Thumbnail oder Anzeige) oder gib eine exakte Breite und Höhe in Pixeln ein.
  2. Öffne die Einstellungen für den Hintergrund: einfarbig, zweifarbiger Verlauf oder klicke auf Zufällig für sichere Zufallsfarben.
  3. Lege optional ein Diagonal- oder Rastermuster darüber und aktiviere die Maß-Überlagerung.
  4. Gib eine Beschriftung ein – mit Zeilenumbrüchen für mehrzeiligen Text – und lege Position, Schriftfamilie, -stärke und -größe fest.
  5. Wähle PNG, JPG, WebP oder SVG und aktiviere @2x für einen Retina-Rasterexport.
  6. Prüfe die Live-Vorschau und klicke auf Herunterladen (bei SVG kannst du auch das Markup kopieren).

Beispiele

Instagram-Beitrag 1080×1080

Wähle die Voreinstellung Instagram Post, lege einen zweifarbigen Verlaufshintergrund an, zentriere eine fette zweizeilige Beschriftung und lade ein PNG für ein Feed-Mockup herunter.

Leaderboard-Anzeige 728×90

Wähle die Voreinstellung Ad Leaderboard, behalte einen einfarbig grauen Hintergrund mit Rastermuster und aktivierter Maß-Überlagerung und exportiere ein WebP als Füllung für einen Anzeigenplatz.

Retina-YouTube-Thumbnail

Wähle die Voreinstellung YouTube Thumbnail (1280×720), aktiviere den @2x-Export und lade ein 2560×1440-PNG herunter, das auf hochauflösenden Bildschirmen scharf bleibt.

Häufig gestellte Fragen

Welche Voreinstellungsgrößen sind enthalten?
Social-Größen (Instagram-Beitrag, Hochformat und Story, Facebook-Titelbild, X-Beitrag und -Header, LinkedIn-Banner, YouTube-Thumbnail, OG-Karte) und gängige Anzeigenformate (Leaderboard, Medium Rectangle, Wide Skyscraper, Billboard). Wähle eines, um Breite und Höhe zu füllen, oder gib eine beliebige eigene Größe ein.
Wie funktionieren die Hintergrund- und Musteroptionen?
Der Hintergrund kann eine einzelne Farbe, ein zweifarbiger Diagonalverlauf oder eine zufällige Palette über die Schaltfläche Zufällig sein, die den sicheren Zufallsgenerator deines Browsers nutzt. Darüber kannst du ein Muster aus Diagonallinien oder ein Raster in der Textfarbe legen.
Kann die Beschriftung mehrere Zeilen umfassen und verschoben werden?
Ja. Gib Zeilenumbrüche im Beschriftungsfeld für mehrzeiligen Text ein, platziere den Block an einer von neun Positionen (oben/Mitte/unten × links/Mitte/rechts) und wähle eine Sans-, Serif- oder Monospace-Schrift mit normaler oder fetter Stärke und automatischer oder fester Größe. Lass die Beschriftung leer, um die Maße automatisch zu drucken.
Was bewirkt der @2x-Export?
Bei den Rasterformaten (PNG, JPG, WebP) wird das Canvas in doppelter Pixelgröße gerendert, damit die Datei auf Retina- und High-DPI-Bildschirmen scharf bleibt. SVG ist bereits auflösungsunabhängig, daher gilt @2x dafür nicht.
Werden meine Bilder oder Texte irgendwohin hochgeladen?
Nein. Jeder Platzhalter wird vollständig in deinem Browser mit den Canvas- und SVG-APIs gezeichnet, und Downloads erfolgen lokal – nichts, was du eingibst oder erzeugst, wird an einen Server gesendet, sodass es offline funktioniert und deine Arbeit privat bleibt.

Verwandte Tools

Code zu Bild

Verwandle einen Code-Schnipsel im Browser in ein Bild mit Syntaxhervorhebung – mit über 20 Sprachen, eigenen Themes und Hintergründen, Zeilennummern und PNG- oder SVG-Export.

Farbkontrast-Prüfer

Prüfe den WCAG-2.1-Kontrast und den APCA-Lc-Wert zwischen Text und Hintergrund, sieh AA-, AAA- und 3:1-Badges und wende die nächste bestandene Farbe an.

Farbmischer

Mische zwei HEX-Farben in einem gewählten Verhältnis im RGB- oder Lab-Farbraum und lies die entstehende Mittelfarbe als Farbfeld und kopierbaren HEX-Wert ab.

Farbabstufungs-Generator

Verwandle eine HEX-Basisfarbe in eine OKLCH-, HSL- oder RGB-Skala mit einstellbaren Stufen, WCAG-Kontrasthinweisen pro Stufe und Export als CSS, Tailwind und JSON.