25 creative 404-Error Pages with cool animations

Published on 22. June 2020Last updated on 17. April 2021

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

See the Pen Responsive 404 Stranger things by ARiyou Jahan (@ARiyou2000) on CodePen.

Author: ARiyou Jahan;
Coded in: HTML, CSS (SCSS);

#2 No Vacancy 404

See the Pen No Vacancy 404 by Riley Shaw (@rileyjshaw) on CodePen.

Author: Riley Shaw;
Coded in: Slim, Sass, CoffeScript;

#3 404 Kittens

See the Pen 404 Kittens by nclud team (@nclud) on CodePen.

Author: nclud team;
Coded in: HTML, CSS (SCSS), JS;

#4 – Glitched out

See the Pen 404 – Glitched out by ZonFire99 (@ZonFire99) on CodePen.

Author: ZonFire99;
Coded in: HTML, CSS, JS;

#5 Fargo 404

See the Pen Fargo 404 by Nathaniel Watson (@nw) on CodePen.

Author: Nathaniel Watson;
Coded in: Pug, CSS (SCSS), JS;

#6 404 No signal

See the Pen 404 No signal by Adem ilter (@ademilter) on CodePen.

Author: Adem ilter;
Coded in: HTML, CSS, JS;

#7 Glitchy 404 Page

See the Pen Glitchy 404 Page by Kay Pooma (@kaypooma) on CodePen.

Author: Kay Pooma;
Coded in: HTML, CSS;

#8 Bluescreen – 404 Page

See the Pen Bluescreen – 404 Page by Angela Galliat (@agalliat) on CodePen.

Author: Angela Galliat;
Coded in: HTML, CSS;

#9 404 Space

See the Pen 404 Space by Keith (@KeithPaul) on CodePen.

Author: Keith;
Coded in: HTML, CSS (SCSS), JS;

#10 Error page – #Project 4

See the Pen Error page – #Project4 by Jake (@Jake_Woods) on CodePen.

Author: Jake;
Coded in: HTML, CSS (SCSS), JS;

#11 404

See the Pen 404 by Metty (@Metty) on CodePen.

Author: Metty;
Coded in: HTML, CSS, JS;

#12 Space 404

See the Pen Space 404 by Ethan (@eroxburgh) on CodePen.

Author: Ethan;
Coded in: HTML, CSS (SCSS), JS;

#13 404 Error Page

See the Pen 404 Error Page by anhat.dev (@nhatanh17) on CodePen.

Author: anhat.dev;
Coded in: HTML, CSS, JS;

#14 Daily UI #008 – 404 Page

See the Pen Daily UI #008 – 404 Page by Rafaela Lucas (@rafaelavlucas) on CodePen.

Author: Rafaela Lucas;
Coded in: HTML, CSS (SCSS), JS;

#15 Lost in Space (ERRORS) (not responsive)

See the Pen Lost in Space (ERRORS) (not responsive) by Radu (@maxym11) on CodePen.

Author: Radu;
Coded in: HTML, CSS (SCSS);

#16 404 Page Not Found

See the Pen 404 Page Not Found by João Sousa (@joaosousa) on CodePen.

Author: João Sousa;
Coded in: HTML, PostCSS;

#17 404 Error Page

See the Pen 404 Error Page by miranda (@mirandalwashburn) on CodePen.

Author: miranda;
Coded in: HTML, CSS;

#18 404 Error page

See the Pen 404 Error page by Abolfazl Arab (@abol) on CodePen.

Author: Abolfazl Arab;
Coded in: HTML, CSS;

#19 404 Makes bear sad ??

See the Pen 404 Makes bear sad ?? by Jhey (@jh3y) on CodePen.

Author: Jhey;
Coded in: Pug, Stylus, Babel;

#20 404-magnifying-glass-svg-animation-css

See the Pen 404-magnifying-glass-svg-animation-css by Maelle Gomez (@maellegomezafpa) on CodePen.

Author: Maelle Gomez;
Coded in: HTML, CSS;

#21 en 404 page

See the Pen en 404 page by Arman Azizpour (@arman_bag) on CodePen.

Author: Arman Azizpour;
Coded in: HTML, CSS;

#22 404 Venn Diagram

See the Pen 404 Venn Diagram by Michael Richins (@MrGrigri) on CodePen.

Author: Michael Richins;
Coded in: HTML, CSS (SCSS);

#23 Tractor Pull 404 Error

See the Pen Tractor Pull 404 Error by Nick Soltis (@nss5161) on CodePen.

Author: Nick Soltis;
Coded in: HTML, CSS (SCSS);

#24 Neon – 404 Page Not Found

See the Pen Neon – 404 Page Not Found by Tibix (@Tibixx) on CodePen.

Author: Tibix;
Coded in: HTML, CSS;

#25 8-bit mario 404

See the Pen 8-bit mario 404 by JFabre (@josfaber) on CodePen.

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!

• Cool CSS Buttons
• Top CSS Navigation Menus
• Satisfying CSS Animations
• Inspiring loading animations

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