25 great 404 Page Templates – with Animations!

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 (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 with funny animations, designs and fun images often a good way to keep visitors on the go – that is, to make them not leave your website. In this course it is also important to give users the possibility to go directly to another subpage on your website (be sure to check out my 404 page). Also responsive pages have to look good, of course.

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

Improve user experience and earn money at the same time?

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;

Earn money with your website or blog

#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

Improve user experience and earn money at the same time?

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.

All content I provide completely free! If you want to support the costs for the operation and my time a little bit, you are welcome to donate me a small amount of your choice. Thanks! 💙

Donation
Related Posts
Join the Conversation

7 Comments

Your email address will not be published.

bold italic underline strikeThrough
insertOrderedList insertUnorderedList outdent indent
removeFormat
createLink unlink
code

This can also interest you