35 HTML 404 Page Templates

404-pages

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 page 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. You just need HTML, CSS and sometimes JavaScript. 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.

These 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
ARiyou2000

Coded with
HTML, CSS (SCSS)

#2 No Vacancy 404

Author
rileyjshaw

Coded with
Slim, Sass, CoffeScript

#3 404 Kittens

Author
team/nclud

Coded with
HTML, CSS (SCSS), JS

#4 – Glitched out

Author
ZonFire99

Coded with
HTML, CSS, JS

#5 Fargo 404

Author
nw

Coded with
HTML (Pug), CSS (SCSS), JS

#6 404 No signal

Author
ademilter

Coded with
HTML, CSS, JS

#7 Glitchy 404 Page

Author
kaypooma

Coded with
HTML, CSS

#8 Bluescreen – 404 Page

Author
agalliat

Coded with
HTML, CSS

#9 404 Space

Author
KeithPaul

Coded with
HTML, CSS (SCSS), JS

#10 Error page – #Project 4

Author
Jake_Woods

Coded with
HTML, CSS (SCSS), JS

#11 404

Author
Metty

Coded with
HTML, CSS, JS

#12 Space 404

Author
eroxburgh

Coded with
HTML, CSS (SCSS), JS

#13 404 Error Page

Author
nhatanh17

Coded with
HTML, CSS, JS

#14 Daily UI #008 – 404 Page

Author
rafaelavlucas

Coded with
HTML, CSS (SCSS), JS

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

Author
maxym11

Coded with
HTML, CSS (SCSS)

#16 404 Page Not Found

Author
joaosousa

Coded with
HTML, CSS (PostCSS)

#17 404 Error Page

Author
mirandalwashburn

Coded with
HTML, CSS

#18 404 Error page

Author
abol

Coded with
HTML, CSS

#19 404 Makes bear sad ??

Author
jh3y

Coded with
HTML (Pug), CSS (Stylus), JS (Babel)

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

Author
maellegomezafpa

Coded with
HTML, CSS

#21 en 404 page

Author
arman_bag

Coded with
HTML, CSS

#22 404 Venn Diagram

Author
MrGrigri

Coded with
HTML, CSS (SCSS)

#23 Tractor Pull 404 Error

Author
nss5161

Coded with
HTML, CSS (SCSS)

#24 Neon – 404 Page Not Found

Author
Tibixx

Coded with
HTML, CSS

#25 8-bit mario 404

Author
josfaber

Coded with
HTML, CSS (SCSS), Babel

#26 404 error page

Author
uiswarup

Coded with
HTML, CSS (Bootstrap), JS (anime.js)

#27 Yeti 404 page

Author
dsenneff

Coded with
HTML, CSS (SCSS), JS (TweenMax.js, MorphSVGPlugin.js, CustomEase.js)

#28 404 page

Author
sarazond

Coded with
HTML, CSS

#29 Ghost Page | 404

Author
diogo_ml_gomes

Coded with
HTML, CSS (SCSS), JS (jQuery)

#30 404 Error Example #3

Author
ricardpriet

Coded with
HTML, CSS

#31 Bubbley 404

Author
kylelavery88

Coded with
HTML, CSS

#32 404 page

Author
chrissamuels

Coded with
HTML, CSS, JS (TweenMax, MorphSVGPlugin)

#33 404 page

Author
Bidji

Coded with
HTML, CSS

#34 404 Error Example

Author
ricardpriet

Coded with
HTML, CSS

#35 404 Page

Author

Coded with
HTML, CSS (SCSS), JS (Babel)

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:

Related Posts
Join the Conversation

9 Comments

  1. Fred Jones says:

    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.

    1. Lorenz says:

      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.

Your email address will not be published. Required fields are marked *

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

This can also interest you