A sleek, macOS-inspired 404 error page with a nostalgic retro interface, interactive color controls, and a clean monospace aesthetic.
A 404 page doesn't have to feel like an error.
404 Retro macOS Window transforms the familiar "page not found" experience into a small, interactive desktop-inspired interface. It combines classic macOS-style window controls with a minimalist retro design, subtle grid background, and dynamic color switching.
Built entirely with HTML, CSS, and vanilla JavaScript, the page has no frameworks, no dependencies, and no build step.
Just copy it into your project, customize it, and make your 404 page feel like part of your website.
| Desktop | Mobile |
|---|---|
|
 |
|
The classic macOS-style window controls aren't just decorative - they're fully interactive. Click the red, yellow, or green control to instantly switch the page's background color, adding a subtle touch of personality while preserving the clean, retro desktop aesthetic. |
Using it with GitHub Pages is simple:
- Rename
index.htmlto404.html. - Keep
404.htmlin the root of your repository. - If using the external version, keep
style.cssandscript.jsalongside it. - Commit and push your changes.
GitHub Pages automatically serves a root-level 404.html when a visitor reaches a page that doesn't exist.
For other hosting platforms, rename index.html to 404.html and upload it to your website's public or root directory.
If you're using the external version, upload style.css and script.js alongside it.
Most hosting platforms automatically serve 404.html for missing pages. If yours requires additional configuration, check your hosting provider's documentation for setting a custom 404 page.
Prefer a single file? Use either inline/index.html or the minified inline/index.min.html.
Simply copy the contents into a new 404.html in your repository or hosting root and you're ready to go – no external CSS, JavaScript, or assets required.
Made with ❤️ by Not Found Pages
Give your visitors something better than a dead end.