GIF works everywhere video doesn’t: in emails, chats, issue trackers and README files. web2vid can render any HTML animation straight to a transparent GIF.
How
- Give the page a transparent background:
html, body { background: transparent }. - In web2vid, open the HTML file and pick a small size: the Sticker (512 × 512) or Emoji (256 × 256) preset is a good start.
- Set Format to .gif, keep Transparent ticked, and render.
Why edges can look jagged
GIF transparency is on or off per pixel: a pixel is either fully visible or fully see-through. Soft shadows, glows and anti-aliased edges are half-transparent, so in a GIF they get rounded to one or the other and can look rough.
Ways to get clean edges:
- Prefer solid shapes and crisp text over soft glows and drop shadows.
- If you know what it will sit on, untick Transparent and pick that background colour. Soft edges then blend into it perfectly.
- For smooth transparency, use WebM on websites or MOV in video editors instead.
Keep the file small
- Small size and a short loop: GIF files grow fast.
- Lower the FPS under Advanced to 15–20 for most UI and sticker animations.
- A seamless loop needs fewer frames to look good.