Wie wandle ich HTML in ein PNG um?

Füge dein HTML-Snippet in das Eingabefeld ein – die Live-Vorschau erscheint sofort. Wähle Auflösung, optional Padding und Transparenz, und klicke auf „Als PNG herunterladen". Das Bild wird komplett in deinem Browser erzeugt, nichts wird hochgeladen.

Bekomme ich ein PNG mit transparentem Hintergrund?

Ja. „Transparenter Hintergrund" ist standardmäßig aktiv – das Ergebnis ist ein echtes PNG mit Alphakanal. Schaltest du die Option aus, kannst du eine beliebige Hintergrundfarbe wählen.

Wird das Bild auf die Größe des Inhalts zugeschnitten?

Genau. Das Tool misst die tatsächliche Breite und Höhe deines Elements und exportiert exakt diesen Bereich – ohne weißen Rand oder leere Fläche. Mit der Padding-Option fügst du bei Bedarf bewusst Abstand hinzu.

Warum ist mein PNG unscharf?

Wahrscheinlich exportierst du in 1×. Wähle 2× oder 3×, um die Auflösung zu vervielfachen – dann bleibt das Bild auch auf Retina-Displays oder im Druck gestochen scharf.

Externe Bilder oder Schriften werden nicht exportiert – warum?

Aus Sicherheitsgründen darf ein Canvas keine Cross-Origin-Ressourcen ohne CORS-Freigabe ausgeben. Bette externe Bilder als data:-URI ein und nutze System-Fonts oder per @font-face eingebettete Schriften, damit alles im PNG landet.

Funktioniert das Tool in Safari?

Die Live-Vorschau ja. Beim PNG-Export blockiert Safari jedoch das Rastern von HTML in einem foreignObject. Nutze in Safari den SVG-Download oder wechsle für PNG zu Chrome, Firefox oder Edge.

Werden Skripte im HTML ausgeführt?

Nein. Es wird ausschließlich das statische Markup gerendert; JavaScript im Snippet läuft nicht. Das Tool eignet sich für gestylte HTML-/CSS-Bausteine, nicht für dynamisch per JS erzeugte Inhalte.

Sind meine Daten sicher?

Ja. Das gesamte Rendering passiert lokal in deinem Browser – dein HTML wird zu keinem Zeitpunkt an einen Server gesendet. Es gibt keinen Upload und kein Tracking.

Was ist der Unterschied zwischen dem PNG- und dem SVG-Export?

Das PNG ist ein Pixelbild mit fester Auflösung und Transparenz – universell nutzbar. Das SVG ist ein Vektor, beliebig skalierbar, verlustfrei und funktioniert in jedem Browser. Für Logos und Druck ist SVG oft die bessere Wahl, für Social Media und Web das PNG.

HTML zu PNG Generator

HTML-Snippet einfügen und als transparentes PNG exportieren – exakt auf die Größe des Inhalts zugeschnitten, ohne Anmeldung.

Beispiele

HTML-Snippet einfügen

Tipp: Styles als style="…" direkt am Element oder per <style>-Tag im Snippet. Externe Bilder bitte als data:-URI einbetten.

Optionen

Auflösung (Skalierung)

Transparenter HintergrundOhne Hintergrundfarbe – ideal für Overlays und Logos.

Rand / Innenabstand

0 = pixelgenauer Zuschnitt. Schatten werden automatisch mitgenommen, nicht abgeschnitten.

Live-Vorschau

✨ Hallo von Selbststarter

Alles läuft lokal in deinem Browser – dein HTML wird nicht hochgeladen. PNG-Export wird von Chrome, Firefox und Edge unterstützt; in Safari nutze den SVG-Download.

Das Wichtigste auf einen Blick

Wandelt ein HTML-Snippet direkt im Browser in ein PNG um – ohne Upload und ohne Anmeldung.
Standardmäßig transparenter Hintergrund und exakter Zuschnitt auf die Größe des Inhalts.
1×, 2× und 3× Auflösung für scharfe Ergebnisse auf Retina-Displays.
Optionaler Innenabstand (Padding) und wählbare Hintergrundfarbe statt Transparenz.
Zusätzlich SVG-Download als verlustfreie, überall funktionierende Alternative.

Ein HTML-Snippet als Bild zu speichern klingt simpel, ist es aber selten: Browser bieten keinen „Element als PNG exportieren"-Button, Screenshot-Tools liefern unscharfe Ausschnitte mit zu viel Rand, und serverseitige Lösungen wie Puppeteer oder wkhtmltopdf sind für einen einzelnen Badge oder Button völliger Overkill. Genau diese Lücke schließt unser HTML-zu-PNG-Generator – komplett im Browser, ohne Upload, ohne Account.

Du fügst dein HTML ein, siehst sofort eine Live-Vorschau und lädst das Ergebnis als PNG herunter – wahlweise mit transparentem Hintergrund und pixelgenau auf die tatsächliche Größe des Elements zugeschnitten. Kein weißer Rand, keine leere Fläche drumherum. Für scharfe Darstellung auf Retina-Displays exportierst du in 2× oder 3× Auflösung, und als robuste Alternative gibt es zusätzlich einen verlustfreien SVG-Download.

Technisch nutzt das Tool den nativen Weg über ein SVG-`foreignObject`, das den HTML-Inhalt aufnimmt und über ein Canvas zu PNG rastert. Das bedeutet: Dein Code verlässt nie deinen Rechner, es laufen keine externen Render-Server, und das Tool funktioniert auch offline, sobald die Seite geladen ist.

Hintergrund & Anwendungen

Wofür HTML zu PNG?

Badges & Buttons: Gestylte UI-Elemente als Bild für READMEs, Slides oder Social-Media-Posts exportieren.
Code-Snippets: Formatierte Code-Zeilen als scharfes Bild teilen, ohne Screenshot-Gefummel.
Zitat- & Info-Karten: Kleine Karten mit Schatten und Rundungen pixelgenau und transparent ausschneiden.
E-Mail-Grafiken: HTML-Bausteine als statisches PNG, wo E-Mail-Clients kein CSS rendern.

Was dieses Tool besonders macht

Transparenz: Ohne Hintergrundfarbe entsteht ein echtes PNG mit Alphakanal – perfekt für Overlays.
Exakter Zuschnitt: Die Ausgabe ist genau so groß wie dein Element, ohne überflüssigen Rand.
Hohe Auflösung: 2×/3×-Skalierung rastert ohne Unschärfe – ideal für Print und Retina.
Privat & lokal: Das Rendering passiert vollständig im Browser, dein HTML wird nie hochgeladen.

Grenzen & Stolperfallen

Externe Bilder: Remote-Bilder ohne CORS-Freigabe blockieren den Export – als data:-URI einbetten.
Web-Fonts: Externe Schriften werden evtl. nicht mitgerastert; nutze System- oder eingebettete Fonts.
Safari: Safari blockiert das Canvas-Rastern von foreignObject – dort den SVG-Download nutzen.
Kein JavaScript: Skripte im Snippet werden nicht ausgeführt – nur das statische Markup wird gerendert.

PNG, SVG oder Screenshot?

PNG: Pixelbild mit Transparenz – universell einsetzbar, feste Auflösung.
SVG: Vektor, beliebig skalierbar und verlustfrei, funktioniert in jedem Browser.
Screenshot: Schnell, aber mit Rand, fester Auflösung und ohne Transparenz.
Empfehlung: Für Web/Social PNG in 2×, für Logos oder Druck eher SVG wählen.

Wie aus HTML ein PNG wird

Der Generator nutzt einen rein clientseitigen Weg ohne Render-Server. So entsteht aus deinem Markup ein pixelgenaues Bild:

1Dein HTML wird unsichtbar gerendert, um die exakte Breite und Höhe des Inhalts zu messen.
2Das gemessene Element wird in ein SVG-<foreignObject> mit genau diesen Maßen eingebettet.
3Optionales Padding und eine Hintergrundfarbe werden angewendet – sonst bleibt der Hintergrund transparent.
4Das SVG wird als Bild geladen und über die gewählte Skalierung (1×/2×/3×) auf ein Canvas gezeichnet.
5Das Canvas wird als PNG-Datei mit Alphakanal exportiert – fertig zum Download oder Kopieren.

Auflösung und Einsatzzweck

Welche Skalierung sich für welchen Zweck eignet (Beispiel: 320 × 80 px Quelle).

Skalierung	Beispiel-Ausgabe	Geeignet für
1×	320 × 80 px	Web, schnelle Vorschau, kleine Dateien
2×	640 × 160 px	Retina-Displays, Social Media, Standard
3×	960 × 240 px	Print, große Darstellung, Präsentationen
SVG	skaliert beliebig	Logos, Icons, verlustfreie Weiterverarbeitung

Häufig gestellte Fragen

Anleitung

1
HTML-Snippet einfügen
Füge dein HTML in das Eingabefeld ein oder starte mit einem der Beispiele. Styles gehören als style-Attribut oder <style>-Tag ins Snippet.
2
Transparenz und Padding einstellen
Lass den Hintergrund transparent oder wähle eine Farbe. Mit dem Padding-Slider fügst du optional Abstand rund um den Inhalt hinzu.
3
Auflösung wählen
Stelle 1×, 2× oder 3× ein. Für scharfe Bilder auf modernen Displays ist 2× ein guter Standard.
4
Vorschau prüfen
Die Live-Vorschau zeigt das Ergebnis inklusive Transparenz-Schachbrett und der exakten Pixelmaße der späteren Datei.
5
PNG herunterladen oder kopieren
Klicke auf „Als PNG herunterladen", kopiere es direkt in die Zwischenablage oder wähle den SVG-Download als Alternative.

Über Selbststarter

Selbststarter ist deine Sammlung kostenloser Online-Tools – aktuell Generatoren, bald auch Konverter und mehr. Alle Tools laufen im Browser, ohne Anmeldung, ohne Tracking.

#html
#png
#konverter
#bild
#frontend