How to use it
- Write HTML and animate it with CSS @keyframes, or click Load Demo Animation.
- Set the frame size, FPS and duration (leave duration blank to detect it automatically).
- Keep Format on MP4 and click Export Video.
- Keep the tab visible while it records, then download the file.
How HTML to MP4 conversion works in your browser
Each frame of your animation is rendered at an exact point in time, then the frames are recorded with your browser's built-in video recorder. That means smooth, correctly timed video even when your layout is too heavy to render in real time.
MP4 recording is only available in browsers that can record it natively, such as recent versions of Chrome, Edge and Safari. If yours cannot, the tool saves a WebM file instead and tells you.
What animations are supported?
CSS @keyframes animations and CSS transitions are captured. Animations driven by JavaScript, such as requestAnimationFrame loops, are not captured by this converter.
Frequently asked questions
Why did I get a WebM file instead of MP4?
Native MP4 recording depends on your browser version. When it is not supported, the tool automatically records WebM, which plays in most modern players and browsers.
Can I include audio?
Not at the moment. Exports are video-only.
Why must the tab stay open while recording?
Browsers throttle background tabs, which can cause dropped frames during the recording phase. Keep the tab visible until the download starts.
Is my code uploaded to a server?
No. The conversion runs entirely in your browser using the Canvas, Web Animations and MediaRecorder APIs. Your HTML, CSS and images never leave your device.