loading...
Cover image for 25 creative 404-Error Pages with cool animations

25 creative 404-Error Pages with cool animations

webdeasy profile image WebDEasy Originally published at webdeasy.de ・4 min read

Originally published on webdeasy.de!

If you call up a page that does not (no longer) exist, you are redirected to 404 pages. But that’s not bad, because 404 pages can work wonders with a little creativity, so that visitors don’t leave your site.

404 pages are called this way, because in case a page does not or no longer exist, the server returns the status code 404 to show that the requested page does not (no longer) exist.

The pens can be used as a template template or as examples for your own site, let yourself be inspired! And let’s be honest…404 jokes are the best! 🤣

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;

Conclusion

As you can see, there are no limits to your creativity. Which one do you like best, or have you perhaps become creative yourself? Please let me know! And maybe your 404 page will appear here soon. 🙂

Not enough? Then this could be something for you!

Note: All pens are published on codepen.io and not by me.

Which page is your favorite? Mine is #1 and #18. Definitely! 👌

Posted on by:

webdeasy profile

WebDEasy

@webdeasy

German Front- & Backend Web Developer. Let us change the world!

Discussion

markdown guide