HTML in GIF umwandeln, Bild für Bild im Browser
Füge eine HTML-, CSS- oder SVG-Animation ein und speichere sie als GIF in Endlosschleife für ein README, eine Slack-Nachricht, eine E-Mail oder eine Doku. Jedes Bild wird auf deinem Rechner gezeichnet; nichts wird hochgeladen.
- ✓Endlosschleife
- ✓360p bis 720p, bis 25 fps
- ✓Kostenlos, ohne Wasserzeichen
- ✓Kein Upload
GIF in 854×480, Bild für Bild auf deinem Computer gezeichnet: flüssig, egal wie schnell er ist, und nichts wird hochgeladen.
Oder starte mit einem Beispiel
Jedes ist eine einzelne HTML-Datei. Laden, anpassen, exportieren.
So funktioniert's
Drei Schritte, alles im Browser
Das Tool übernimmt die Uhr der Seite, stellt sie Bild für Bild weiter und zeichnet jedes Bild. So entsteht auf einem langsamen Laptop dasselbe Video wie auf einem schnellen.
- 01
Einfügen oder Datei ablegen
Eine ganze Seite mit CSS und JavaScript, eine .html-Datei oder ein .zip-Export mit Bildern und Schriften. Bibliotheken von einem CDN laden wie gewohnt.
- 02
Format und Größe wählen
MP4, GIF, WebM oder ein PNG-Einzelbild; 16:9, 9:16 oder 1:1; 720p bis 4K mit 24, 30 oder 60 fps. Haben die Animationen ein Ende, wird die Länge automatisch gesetzt.
- 03
Rendern und herunterladen
Jedes Bild wird auf deinem Rechner gezeichnet und kodiert, danach steht die Datei zum Download bereit. Keine Bildschirmfreigabe, kein Upload.
Kleine, scharfe GIFs
Halte es kurz
2 bis 6 Sekunden reichen; die Größe eines GIFs wächst mit jedem Bild.
Einen Zyklus loopen
Stell die Länge auf einen vollen Zyklus der Animation, damit der Loop ohne Sprung anschließt.
15 fps und 480p
Die Voreinstellung passt für die meisten Dokus und Chats; 25 fps für schnelle Bewegung, 720p für Details.
Flächige Farben klappen am besten
Ein GIF hat 256 Farben pro Bild; lange Verläufe und Fotos bekommen Streifen. Dafür ist ein MP4 kleiner und schärfer.
Über dieses Tool hinaus
Eine Animation ist ein Anfang. Ein Skill macht den ganzen Film.
Dieses Tool macht aus dem HTML, das du schon hast, ein Video. Ein Motion Skill setzt einen Schritt früher an: In Claude Code, Codex oder Cursor liest dein Agent dein Produkt oder deine Notizen, plant die Einstellungen, schreibt jede Szene, unterlegt die Musik und rendert das fertige MP4.
- ✓Aus deinem eigenen Material, nicht aus einem leeren Prompt
- ✓Mehrere Szenen, mit Musik zusammengeschnitten
- ✓Auf deinem Rechner gerendert und frei für dich nutzbar
Skills, die hier weitermachen
Jeder macht eine andere Art von Film. Der erste passt am besten zu dieser Seite.
Du machst mehr als eine Art von Film?
Starte kostenlos mit Motion Director. Ein einzelner Skill kostet $4.90; ein Abo schaltet alle Skills frei, auch die neuen, sobald sie erscheinen.
Monatlich
$9.90/ Monat
- ✓Alle Komplettfilm-Skills, Stile eingebaut
- ✓Neue Skills, sobald sie erscheinen
- ✓Updates bestehender Skills
- ✓Kommerzielle Nutzung deiner Renderings
Jährlich
34 % sparen$79/ Jahr
- ✓Alle Komplettfilm-Skills, Stile eingebaut
- ✓Neue Skills, sobald sie erscheinen
- ✓Updates bestehender Skills
- ✓Kommerzielle Nutzung deiner Renderings
Gründerpass lebenslang
Gründerangebot$169einmalig
- ✓Alle Komplettfilm-Skills, Stile eingebaut
- ✓Neue Skills, sobald sie erscheinen
- ✓Updates bestehender Skills
- ✓Kommerzielle Nutzung deiner Renderings
- ✓Einmal zahlen, keine Verlängerung
Motion Director (kostenlos) holen →Ein Skill $4.90 · Skill auswählen →
Fragen
Wie wandle ich eine CSS-Animation in ein GIF um?
Füge die Seite ein (HTML mit CSS), wähle GIF, stell die Länge auf einen Zyklus und rendere. Das GIF wird Bild für Bild gezeichnet, also läuft es flüssig und ist genau so lang wie eingestellt.
Warum ist mein GIF so groß?
Jedes Bild wird mit einer eigenen 256-Farben-Palette gespeichert. Kürze es, senke Bildrate oder Größe, oder nimm MP4, das oft nur ein Zehntel so groß ist.
Hat das GIF einen transparenten Hintergrund?
Nein: Transparenz ist bei GIF eine Farbe an oder aus, das wirkt an weichen Kanten gezackt. Für Transparenz nimm WebM oder PNG aus demselben Tool.
Wird etwas hochgeladen?
Nein. Die Seite läuft in deinem Browser, und das GIF wird dort kodiert.