Fix42
Guide • 4 min read

How to Turn a CSS Animation into a GIF

Make an animated GIF from your keyframes for README files, pull requests, docs, Slack, and email — places where an MP4 either won't embed or won't autoplay.

Open the HTML to GIF Converter

Where GIF Still Beats Video

Suppose you built a slick skeleton-loading state and want to show it off in a GitHub README or a pull request description. GitHub won't play an inline MP4 in a README the way it renders an image, and most chat tools, wikis, and email clients are just as picky. A GIF, on the other hand, is treated like any other image: it loads inline, plays automatically, loops forever, and needs no player, codec, or unmute tap.

The HTML to GIF Converter renders your HTML and CSS in a real headless browser on the server, captures one screenshot per frame across the duration you choose, and assembles the frames into a GIF with an optimized color palette. Your keyframes, transitions, and transforms play exactly as they would on a live page.

Worked Example: A Skeleton-Loading Shimmer

This snippet draws a card with a circular avatar and three text lines, all sweeping with the classic loading shimmer. The shimmer cycle is 1.5 seconds, and the grays involved are few enough that the GIF palette handles them cleanly. 

<div class="wrap">
  <div class="card">
    <div class="avatar"></div>
    <div class="line w1"></div>
    <div class="line w2"></div>
    <div class="line w3"></div>
  </div>
</div>

<style>
.wrap {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #f3f4f6;
}
.card {
  width: 320px; padding: 24px; background: #fff;
  border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,.08);
}
.avatar { width: 56px; height: 56px; border-radius: 50%; margin-bottom: 8px; }
.line { height: 14px; border-radius: 7px; margin-top: 14px; }
.w1 { width: 75%; }
.w2 { width: 100%; }
.w3 { width: 55%; }
.avatar, .line {
  background: linear-gradient(90deg, #e5e7eb 25%, #d1d5db 37%, #e5e7eb 63%);
  background-size: 400% 100%;
  animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
</style>

Step by Step

  1. Paste the snippet into the HTML to GIF Converter.
  2. Choose the Square (480) preset — 480×480 is small enough to load fast in a README while staying sharp.
  3. Set Duration to 3s (two full shimmer sweeps) and FPS to 15, the sweet spot for smooth-but-small GIFs.
  4. Leave Loop Forever switched on and set the background to a light gray like #f3f4f6 to match the card.
  5. Click Convert to GIF and download. Drag the file straight into your README, PR, or Slack thread.

Working Within GIF's Limits

A GIF frame can hold at most 256 colors. The converter builds an optimized palette from your actual content, but wide rainbow gradients and photographic imagery will still band or dither. Flat UI colors, text, and shapes — like this skeleton card — compress beautifully. If your animation leans on rich gradients, export it as MP4 with the HTML to Video tool instead; read the MP4 guide for that workflow.

File size is the other constraint. GIF has no modern video compression, so size grows with resolution, frame count, and color variety. The tool accepts widths from 100 to 1920 px, heights from 100 to 1080 px, frame rates from 5 to 30 fps, and durations from 0.5 to 10 seconds — but staying near 480 px, 10–15 fps, and a 2–4 second loop is what keeps a GIF in the comfortable sub-megabyte range for chat and email.

  • Match duration to the cycle. A 1.5s shimmer looped in a 3s clip repeats seamlessly; a 2.5s clip would visibly snap on replay.
  • Play-once GIFs are possible. Toggle Loop Forever off and the GIF stops on its final frame — useful for "before and after" reveals.
  • Keep styles inline. External stylesheets and fonts may not load before capture starts; put everything in one <style> block.

Frequently Asked Questions

Can I put the generated GIF in a GitHub README?

Yes, that is one of the best uses. Upload the GIF to your repository or drag it into an issue or pull request comment, then reference it with standard Markdown image syntax. It plays inline and loops automatically, unlike video files which GitHub does not render inside a README.

What settings keep the GIF file size small?

Three levers matter: resolution, frame rate, and duration. A 480x480 canvas at 10 to 15 fps with a 2 to 4 second loop usually stays well under a megabyte for flat-color UI animations. Every step up in size or smoothness multiplies the frame data the GIF must store.

Why do smooth gradients look grainy in my GIF?

The GIF format allows only 256 colors per frame. The converter builds an optimized palette from your content, but a wide gradient contains thousands of shades, so the encoder approximates them with banding or dithering. Flat colors and text stay crisp; for gradient-heavy work, export MP4 instead.

How long can a converted GIF be?

Between 0.5 and 10 seconds, at 5 to 30 frames per second. Because GIFs loop natively, a short 2 or 3 second cycle usually communicates more than a long clip while producing a far smaller file that chat apps and email clients load without lag.

Can the GIF play just once instead of looping?

Yes. Switch off the Loop Forever toggle before converting and the finished GIF plays through a single time, then freezes on its last frame. Leave the toggle on for the familiar infinite loop, which is the default and what most viewers expect.

Make Your GIF Now

Paste your animation, pick the 480 square preset, and download a loop-ready GIF.

Convert CSS Animation to GIF

More Guides