30 HTML 404 Page Template Inspirations

When you call up a page that does not (or no longer) exist, you are redirected to 404 pages. But this is not directly bad, because the 404 templates can work wonders with a little creativity, so that visitors do not leave your site.
404 pages (or Error Page) are so called because servers return the HTTP status code 404 in case of a non-existent or no longer existing page to show that the requested page does not (no longer) exist.
A creative way for 404 page templates is to use funny animations, designs and funny images to make its visitors not leave the website. In this course, it is also important to give users directly the possibility to go to another subpage on your website. Also responsive pages must of course look good.
The 404 page templates can serve as a template template or as examples for your own page (completely free of course), get inspired! And let’s be honest…404 jokes are the best, right?
I was about to make a joke about 404 pages, but didn’t find one.
The shown pens are licensed with MIT. You can find more information about your own use in the Codepen Blog.
#1 Responsive 404 Stranger things
Author: ARiyou Jahan;
Coded in: HTML, CSS (SCSS);
#2 No Vacancy 404
Author: Riley Shaw;
Coded in: Slim, Sass, CoffeScript;
#3 404 Kittens
Author: nclud team;
Coded in: HTML, CSS (SCSS), JS;
#4 – Glitched out
Author: ZonFire99;
Coded in: HTML, CSS, JS;
#5 Fargo 404
Author: Nathaniel Watson;
Coded in: Pug, CSS (SCSS), JS;
#6 404 No signal
Author: Adem ilter;
Coded in: HTML, CSS, JS;
#7 Glitchy 404 Page
Author: Kay Pooma;
Coded in: HTML, CSS;
#8 Bluescreen – 404 Page
Author: Angela Galliat;
Coded in: HTML, CSS;
#9 404 Space
Author: Keith;
Coded in: HTML, CSS (SCSS), JS;
#10 Error page – #Project 4
Author: Jake;
Coded in: HTML, CSS (SCSS), JS;
#11 404
Author: Metty;
Coded in: HTML, CSS, JS;
#12 Space 404
Author: Ethan;
Coded in: HTML, CSS (SCSS), JS;
#13 404 Error Page
Author: anhat.dev;
Coded in: HTML, CSS, JS;
#14 Daily UI #008 – 404 Page
Author: Rafaela Lucas;
Coded in: HTML, CSS (SCSS), JS;
#15 Lost in Space (ERRORS) (not responsive)
Author: Radu;
Coded in: HTML, CSS (SCSS);
#16 404 Page Not Found
Author: João Sousa;
Coded in: HTML, PostCSS;
#17 404 Error Page
Author: miranda;
Coded in: HTML, CSS;
#18 404 Error page
Author: Abolfazl Arab;
Coded in: HTML, CSS;
#19 404 Makes bear sad ??
Author: Jhey;
Coded in: Pug, Stylus, Babel;
#20 404-magnifying-glass-svg-animation-css
Author: Maelle Gomez;
Coded in: HTML, CSS;
#21 en 404 page
Author: Arman Azizpour;
Coded in: HTML, CSS;
#22 404 Venn Diagram
Author: Michael Richins;
Coded in: HTML, CSS (SCSS);
#23 Tractor Pull 404 Error
Author: Nick Soltis;
Coded in: HTML, CSS (SCSS);
#24 Neon – 404 Page Not Found
Author: Tibix;
Coded in: HTML, CSS;
#25 8-bit mario 404
Author: JFabre;
Coded in: HTML, CSS (SCSS), Babel;
#26 404 error page
Author: Swarup Kumar Kuila;
Coded in: HTML, CSS (Bootstrap), JS (anime.js);
#27 Yeti 404 page
Author: Darin;
Coded in: HTML, CSS (SCSS), JS (TweenMax.js, MorphSVGPlugin.js, CustomEase.js);
#28 404 page
Author: sarazond;
Coded in: HTML, CSS;
#29 Ghost Page | 404
Author: Diogo Gomes;
Coded in: HTML, CSS (SCSS), JS (jQuery);
#30 404 Error Example #3
Author: Ricardo Prieto;
Coded in: HTML, CSS;
Conclusion
As you can see, there are no limits to your creativity. Which 404 page template do you like the most, or maybe you got creative yourself? Feel free to let me know! And maybe your 404 page will show up here soon. 🙂
Note: All pens are published on codepen.io and not by me.
Not enough? Then this could be something for you:
What did you think of this post?


Sorry but NONE of them work, I’m assuming that the source files are separate files, IE HTML, CSS and JS, and to have 3 files created.IEThe HTML code goes into an html file, the CSS code to a css file, and if any java, then it too goes into its own files, ie, 404.html, 404, css and (if using java), 404.js and placed into a folder within a virtual host, and adding the apache directive:-ErrorDocument 404 /pages/404.html which doesn’t do what it should.Have a look at this url:- https://musaholic-studios.no-ip.org:13080/testit should show a centered, green 404 error on a black background, but nope.
You can put the full code in one HTML file or you can put them in seperate HTML, CSS and JS files. But you need to import them in your HTML file of course. And be careful: some of them using seperate libraries to work.