Make a GIF with a transparent background
Set the background to transparent before exporting, not after. GIF carries real transparency, so the loop drops onto any page or canvas colour with no halo.
- Runs in your browser
- Files never uploaded
- Free to start
How to do it
- Open the MeshShot web app and import your model, logo SVG or 3D text.
- In Scene, set the background to transparent. Do this before rendering: a GIF cut out afterwards keeps a fringe.
- Turn the contact shadow off, or it renders as a grey smudge against nothing.
- Apply a camera move, then export as GIF with transparency enabled.
GIF transparency is binary: a pixel is either fully visible or fully gone, with nothing in between. That is why a cut-out made after the fact looks bad, because the semi-transparent pixels at the edge of an anti-aliased render have to be forced one way or the other and leave a hard, often haloed, outline. Rendering straight to transparency avoids the problem, since the renderer knows which pixels are background while it still has the information.
Good to know: Because transparency is all-or-nothing, a soft shadow cannot fade into the page. If you want a shadow, render onto the colour it will sit on instead, and skip transparency.
Questions
Can a video have a transparent background too?
No format in common use does. MeshShot renders a matching matte alongside the video for compositing.
Why does my transparent GIF have a white edge?
It was cut out after rendering. Render with a transparent background from the start.
Does this work in Figma?
Yes. The plugin places a transparent GIF straight on your canvas. See adding a GIF to Figma.