Custom 404 Page Generator
Fill in the form, watch it build live, download one self-contained 404.html. No signup, no tracking, no build step. Optional playable mini-game so a dead link becomes something people forgive.
1. Build your page
2. Live preview
This is the real generated file, running. Play it — the game works in the preview exactly as it will on your site.
3. The HTML
One file. No dependencies, no external requests, no fonts to load. Paste it wherever your host wants a 404 page.
Where to put your 404 page
| Platform | What to do |
|---|---|
| Netlify | Drop 404.html in your publish directory (usually public/ or the site root). Netlify serves it automatically — no config needed. |
| Vercel | Next.js: put the markup in pages/404.js or app/not-found.tsx. Static sites: a top-level 404.html is picked up automatically. |
| Cloudflare Pages | Place 404.html at the root of your build output. Served for any unmatched path. |
| GitHub Pages | Commit 404.html to the root of the published branch (or /docs if that is your source). |
| Apache | Upload the file, then add ErrorDocument 404 /404.html to your .htaccess. |
| Nginx | In your server block: error_page 404 /404.html; then location = /404.html { internal; }. |
| WordPress | Copy the body markup into your theme's 404.php (child theme, so updates don't wipe it), or paste it into a page built with your block editor and point a 404 plugin at it. |
| Shopify | Edit templates/404.liquid in your theme code and paste the body markup inside the layout. |
Why bother with a 404 page
Keep the visitor
A default server 404 is a dead end and most people close the tab. One clear button back to a page that exists recovers a share of that traffic.
Make the failure cheap
Broken links are inevitable — old posts, renamed URLs, mistyped addresses. A page with a bit of charm turns an annoyance into something forgivable.
Zero performance cost
The generated file is self-contained: inline CSS, inline script, no fonts, no trackers, no third-party requests. It loads instantly even on a bad connection.
Pro pack
The generator above is free and always will be — the page it produces is yours to use on any site, commercially, with no attribution required beyond a small credit comment you can delete.
The Pro pack is for people who want more than one look:
- 6 extra themes — animated starfield, terminal, blueprint, paper, brutalist, and a light theme for bright sites.
- The mini-game source, commented and unminified, so you can retheme it or swap in your own artwork.
- Unlimited sites — one purchase covers every project you build, including client work.
Delivery is by email after checkout — send your Stripe receipt to [email protected] and the pack comes back to you. Not what you expected? Reply to that address and you get a refund, no argument.
Questions
Is the generated page really free to use?
Yes. Use it on personal or commercial sites, modify it, ship it to clients. There is no licence key and nothing phones home.
Does it work without JavaScript?
The text, styling and the back button are plain HTML and CSS, so they work with scripting disabled. Only the optional mini-game needs JavaScript, and it fails quietly if it can't run.
Will the mini-game slow my site down?
No. It is a few kilobytes of inline canvas code on one page that most visitors never see, and it only animates while that page is open.
Can I change the colours afterwards?
Yes — the CSS is inline at the top of the file in plain custom properties. Edit the handful of colour variables and the whole page follows.
Do I need a build step or a framework?
No. It is one static HTML file. Upload it and point your server at it.
Want the game on a page that isn't a 404? The same engine is available as a free embeddable game widget you can drop into any page with one line of HTML.