Overview
Introduction
This tool turns a single static PNG into a short fade-out animation, saved as a real Animated PNG (APNG) file you can drop straight into a web page or app.
Every frame is generated and compressed locally in your browser; nothing you upload is sent anywhere.
What Is PNG Fade-out Generator?
A client-side APNG encoder that renders N copies of your image, each with a linearly decreasing opacity level, and packs them into one valid multi-frame PNG file using the APNG extension chunks (acTL, fcTL, fdAT).
It shares its frame renderer (the PNG Opacity Changer's alpha-scaling function) and its chunk encoder with the PNG Fade-in Generator.
How PNG Fade-out Generator Works
Each frame reuses the same alpha-scaling function as the PNG Opacity Changer, stepping the opacity down from a full 100% on the first frame toward roughly 0 on the last.
Every frame's raw scanlines are zlib-deflated with the browser's native CompressionStream and assembled with hand-computed CRC-32 checksums into a spec-correct APNG chunk stream.
When To Use PNG Fade-out Generator
Use it to make an image gracefully disappear, such as a notification, tooltip graphic, or splash logo that should vanish rather than cut off abruptly.
It's also useful for producing a matching bookend to a fade-in animation for a slideshow-style transition.
Often used alongside PNG Fade-in Generator, Disappearing PNG Creator and PNG Rotator.
Features
Advantages
- Produces a real, spec-valid APNG file rather than a fake or renamed static image.
- Runs entirely client-side; no server ever sees the uploaded image.
- Shares proven frame-rendering and chunk-encoding logic with the Fade-in Generator, so behavior stays consistent between the two.
Limitations
- Frame count is capped at 60 to keep file size and encoding time reasonable.
- Every frame stores its own full compressed pixel data (no delta/partial-region encoding), so file size scales roughly linearly with frame count.
- APNG playback support varies: most modern browsers and image viewers play it natively, but some older or minimal image tools only show the static first (fully opaque) frame.
Examples
Best Practices & Notes
Best Practices
- Use more frames for large, high-contrast images where opacity steps would otherwise look banded.
- Pair with the PNG Fade-in Generator for a matching in/out animation pair.
Developer Notes
This lib file imports both changePngOpacity (from the PNG Opacity Changer) and encodeApng (from the PNG Fade-in Generator) rather than re-deriving alpha-scaling or chunk-encoding math, per the codebase's reuse-over-reimplementation convention.
PNG Fade-out Generator Use Cases
- Making a notification or toast graphic disappear smoothly
- Ending a slideshow or intro sequence with a graceful fade-out
- Producing a self-playing vanish effect without JavaScript
Common Mistakes
- Expecting the very last frame to be pixel-perfect zero opacity — it approaches but doesn't always hit exactly 0% depending on frame count.
- Using very few frames for a large image, which can make the fade look like abrupt jumps rather than a smooth transition.
Tips
- Preview the animation directly in the output panel before downloading, since most browsers render APNG natively.
- Increase frame count first if the fade looks 'steppy' before increasing per-frame delay.