Turn an HTML animation into a GIF

For READMEs, pull requests, docs, chat and anywhere a video will not play. Paste the code, pick a size, download the GIF.

Or start from an example:

Getting the code from an AI?

Preview

Your animation plays here as soon as you paste it.

Keep this tab in front while it renders.

Download
Format
Aspect ratio
sec

Runs on your device. Your file is never uploaded.

Ask AI for export-ready HTML

Paste this after your request, or send it with the code you already have. This gives the result the best chance of rendering cleanly.

Three steps
  1. 1
    Paste
    Paste the HTML, or drop an .html or .zip file. The preview starts right away.
  2. 2
    Check
    Choose the aspect ratio for where the video will be used. The length is read from the animation, and you can change it.
  3. 3
    Export
    Choose MP4, GIF, transparent WebM or a PNG frame and download the file.
Ask AI for export-ready HTML
Paste this after your request, or send it with the code you already have. This gives the result the best chance of rendering cleanly.
Rewrite this animation as one self-contained HTML file that I can export to video with htmlto.video:
- Design it for a 16:9 frame. It must fill the browser window exactly (100vw by 100vh, no scrolling). Size everything in vw and vh so it scales to any resolution.
- It starts by itself when the page loads and needs no mouse, keyboard or scrolling.
- It has a fixed length. State the length in a comment on the first line, like <!-- duration: 8s -->.
- Animate with CSS animations, the Web Animations API, GSAP, or requestAnimationFrame using its timestamp argument. Do not use video, audio or iframes.
- Put all CSS and JavaScript inline. Embed images as inline SVG or data URLs. Fonts and libraries may only come from a CDN that allows cross-origin loading, such as Google Fonts, cdnjs or jsDelivr.
- Reply with the complete HTML in a single code block.
Getting a good GIF
Keep it short
A GIF grows quickly. Three to eight seconds at 480p is usually right for a README or a chat message.
Loops line up
A looping animation is cut to exactly one cycle, so the GIF repeats without a jump.
Flat colours work best
A GIF holds 256 colours per frame. Flat shapes and text stay crisp; soft gradients and photos show banding.
Need quality instead?
Export MP4 from the same code. It is sharper and much smaller, wherever video is accepted.
What it can render
  • CSS animations and transitions
  • GSAP, anime.js, Motion and other JavaScript libraries
  • Canvas 2D
  • SVG animated with CSS or JavaScript
  • WebGL and Three.js
  • The Web Animations API and requestAnimationFrame
What it cannot do yet
  • Safari, iPhone and iPad cannot export. The preview works there.
  • Videos, audio and iframes inside the page are left out.
  • Images and fonts from servers that block cross-origin reading will be missing.
  • Animations that wait for a click, hover or scroll will not advance.
  • SVG animated with SMIL tags such as <animate> is not captured.
  • Very heavy WebGL scenes can fail on slower computers.