Every error page here was designed and coded in-house by uiCookies — our own pack, not a roundup. Each design is a single self-contained HTML file with the CSS inlined: five 404 pages, two 500 pages, and a 503 maintenance page. No images, no libraries — the illustrations are CSS.
Error pages are the page you never design until you need one. These eight cover the tones a real product might want: quiet and minimal, playful, recovery-focused with search, engineer-facing with logs, glitchy, brutalist, scheduled-maintenance with a countdown, and consumer-friendly.
Download all 8 (free) Browse live demos
The designs
1. Minimal 404
Giant gradient type, one line of explanation, one button home. When the error page should apologize quietly and get out of the way.
2. Lost in Space 404
A floating CSS moon, sixty twinkling stars, and a “return to Earth” button. The illustration is pure CSS and a ten-line star script — no images.
3. Helpful 404 with Search
The recovery-focused pattern: an error badge, a search box, and quick links to the pages people were probably looking for. Best choice for content-heavy sites.
4. Terminal 500
A terminal-window 500 with a fake log excerpt, a retry action, and a status-page link. Says “we know, we’re on it” in a way engineers trust.
5. Glitch 404
An RGB-split glitch animation on the 404 itself, done with clip-path and two keyframe tracks. Dark, loud, and dependency-free.
6. Neobrutalist 404
A tilted card, hard offset shadows, and copy with attitude. For brands that would rather make people smile than apologize.
7. 503 Maintenance
A scheduled-maintenance page with a spinning gear and a live countdown timer, plus a status-page link. Set the minutes in one variable.
8. Friendly 500
A blinking CSS face, calm reassuring copy, and refresh/home actions. The soft-landing option for consumer products.
Wiring an error page up
Point your server at the file: in nginx, error_page 404 /errors/404.html; with a matching location; in Apache, ErrorDocument 404 /errors/404.html. Frameworks have equivalent hooks (a 404 route or template). Keep the page self-contained — an error page that loads assets from the same broken server is how you get blank screens.
Frequently asked questions
Are these error page templates free?
Yes. The whole pack downloads free from the uiCookies pack page — no signup. See the uiCookies license page for attribution details.
What is the difference between a 404, 500, and 503 page?
A 404 means the page does not exist; a 500 means the server hit an unexpected error; a 503 means the service is intentionally unavailable (usually maintenance). The pack includes designs for all three, and the copy in each is written for its status code.
Why should an error page be a single self-contained file?
Because when the server is failing, external CSS and images may fail with it. Every design here inlines everything, so the page renders even when nothing else does.
Can I customize the copy and colors?
Yes — each file keeps its palette in a small CSS block and its copy in plain markup. Rebranding a design takes minutes.
Rounding out a site? Grab our header templates and login forms, or start from a full free HTML website template.
