35+ HTML 404 Page Templates
Tags: webdev, beginners, javascript, tutorial
Published: 2022-05-22 13:09:46

**Hello Friends, In this article I have listed 35+ Best HTML CSS 404 Page Templates which are available on CodePen.**

## Best Collection of 404 error page design
### #1: 404 Page – Lost In Space

![404 Page – Lost In Space](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zhvckcvemo7mp9x2b37o.jpg)
404 Page – Lost In Space, which was developed by Saleh Riaz Qureshi. Moreover, you can customize it according to your wish and need.

**Author**:	Saleh Riaz Qureshi
**Created on**:	April 23, 2018
**Made with**:	HTML, CSS & JS
**Tags**:	404 Page Lost In Space

{% codepen https://codepen.io/salehriaz/pen/erJrZM %}

### #2: 404 SVG animated page concept

![404 SVG animated page concept](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vqzw668bzvfp83ba755d.jpg)
404 SVG animated page concept, which was developed by Volodymyr Hashenko. Moreover, you can customize it according to your wish and need.

**Author**:	Volodymyr Hashenko
**Created on**:	October 7, 2016
**Made with**:	HTML & CSS
**Tags**:	404 SVG animated page concept
{% codepen https://codepen.io/gxash/pen/MjQOom %}

### #3: Oops! 404 error page template

![Oops! 404 error page template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whxzfgq62hwxai2el5s3.jpg)
Oops 404 error page design, which was developed by Israa Adnan. Moreover, you can customize it according to your wish and need.

**Author**:	Israa Adnan
**Created on**:	June 30, 2021
**Made with**:	HTML & CSS
**Tags**:	Oops 404 error page template
{% codepen https://codepen.io/Israa-Adnan/pen/zYwxByr %}

### #4: Simple 404 page error template

![Simple 404 page error template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crthzohiqivtp6qts2yn.jpg)
Simple 404 page error template, which was developed by Naved khan. Moreover, you can customize it according to your wish and need.

**Author**:	Naved khan
**Created on**:	June 18, 2018
**Made with**:	HTML & CSS
**Tags**:	Simple 404 page error template
{% codepen https://codepen.io/Navedkhan012/pen/vrWQMY %}

### #5: Yeti 404 Page

![Yeti 404 Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dqofy2ff3mar2tjb5cc.jpg)
Yeti 404 Page, which was developed by Darin. Moreover, you can customize it according to your wish and need.

**Author**:	Darin
**Created on**:	August 17, 2018
**Made with**:	HTML, CSS(SCSS) & JS
**Tags**:	Yeti 404 Page
{% codepen https://codepen.io/dsenneff/pen/mjZgmN %}

### #6: 404 Page UI

![404 Page UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jufstqctaaxn0xlkwh6i.jpg)
404 Page UI, which was developed by Rafaela Lucas. Moreover, you can customize it according to your wish and need.

**Author**:	Rafaela Lucas
**Created on**:	November 27, 2019
**Made with**:	HTML, CSS(SCSS) & JS
**Tags**:	daily ui 404 Page
{% codepen https://codepen.io/rafaelavlucas/pen/NWWQNjZ %}

### #7: Fargo 404 page template

![Fargo 404 page template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v25mhfdi1okr68anzwj9.jpg)
Fargo 404 page design, which was developed by Nate Watson. Moreover, you can customize it according to your wish and need.

**Author**:	Nate Watson
**Created on**:	November 18, 2015
**Made with**:	HTML(Pug), CSS(SCSS) & JS
**Tags**:	Fargo 404 page design
{% codepen https://codepen.io/nw/pen/WQmxYY %}

### #8: GSAP 404 typed message using SplitText

![GSAP 404 typed message using SplitText](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q79zhocuwli1fl75hcw9.jpg)
GSAP 404 typed message using SplitText, which was developed by Selcuk Cura. Moreover, you can customize it according to your wish and need.

**Author**:	Selcuk Cura
**Created on**:	October 22, 2017
**Made with**:	HTML, CSS(SCSS) & JS
**Tags**:	GSAP 404 typed message using SplitText
{% codepen https://codepen.io/selcukcura/pen/XeQpEv %}

### #9: Mars 404 Error Page

![Mars 404 Error Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwfouu3j2gd6a1azlgns.jpg)
Mars 404 Error Page, which was developed by Asyraf Hussin. Moreover, you can customize it according to your wish and need.

**Author**:	Asyraf Hussin
**Created on**:	September 2, 2018
**Made with**:	HTML & CSS
**Tags**:	Mars 404 Error Page
{% codepen https://codepen.io/AsyrafHussin/pen/KxWRrK %}

### #10: 404 Error Page Template Example

![404 Error Page Template Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ktu20937yts03707r1k.jpg)
404 Error Page Design, which was developed by Ricardo Prieto. Moreover, you can customize it according to your wish and need.

**Author**:	Ricardo Prieto
**Created on**:	November 4, 2017
**Made with**:	HTML & CSS
**Tags**:	404 Error Page Design
{% codepen https://codepen.io/ricardpriet/pen/qVZxNo %}


[![CSS Like Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uiv01amf3tbvd2tlp632.jpg)](https://blog.stackfindover.com/css-like-buttons/)

### #11: CSS 404 page template

![CSS 404 page template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1hpzp8zgq6ozpdjp901.jpg)
CSS 404 page template, which was developed by agathaco. Moreover, you can customize it according to your wish and need.

**Author**:	agathaco
**Created on**:	July 28, 2018
**Made with**:	HTML(Pug) & CSS(SCSS)
**Tags**:	CSS 404 page
{% codepen https://codepen.io/agathaco/pen/WKXREy %}

### #12: Error 404 Page not found

![Error 404 Page not found](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wm3xavwlgxjseafca5q7.jpg)
Error 404 Page not found, which was developed by Robin Selmer. Moreover, you can customize it according to your wish and need.

**Author**:	Robin Selmer
**Created on**:	August 22, 2017
**Made with**:	HTML & CSS(SCSS)
**Tags**:	Error 404 Page not found
{% codepen https://codepen.io/robinselmer/pen/vJjbOZ %}

### #13: Neon – 404 html template

![Neon – 404 html template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wtd6zrz1i1520uhwjrsk.jpg)
Neon – 404 html template, which was developed by Tibix. Moreover, you can customize it according to your wish and need.

**Author**:	Tibix
**Created on**:	August 27, 2019
**Made with**:	HTML & CSS(SCSS)
**Tags**:	Neon 404 html template
{% codepen https://codepen.io/Tibixx/pen/GRKmppz %}

### #14: Sassy page not found template

![Sassy page not found template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6dsmc6a6qk6rp6yybuo4.jpg)
Sassy page not found template, which was developed by Justin Juno. Moreover, you can customize it according to your wish and need.

**Author**:	Justin Juno
**Created on**:	May 7, 2020
**Made with**:	HTML & CSS(SCSS)
**Tags**:	page not found template
{% codepen https://codepen.io/justinjunodev/pen/WNQMyvX %}

### #15: Animated 404 page design html

![Animated 404 page design html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbkvafhiqlg0orjb43ln.jpg)
Animated 404 page design html, which was developed by Jaymie Rosen. Moreover, you can customize it according to your wish and need.

**Author**:	Jaymie Rosen
**Created on**:	October 15, 2017
**Made with**:	HTML, CSS & JS
**Tags**:	Animated 404 page design html
{% codepen https://codepen.io/jaymierosen/pen/mBzyLR %}

### #16: Pure CSS Error Page 404 vampire

![Pure CSS Error Page 404 vampire](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09odpu3icp5s86k5gcb3.jpg)
Pure CSS Error Page 404 vampire, which was developed by Omar Dsooky. Moreover, you can customize it according to your wish and need.

**Author**:	Omar Dsooky
**Created on**:	August 10, 2017
**Made with**:	HTML & CSS
**Tags**:	Pure CSS Error Page 404 vampire
{% codepen https://codepen.io/linux/pen/OjmeKP %}

### #17: Simple 404 Error page

![Simple 404 Error page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4i5z94xx2xj07hqt8db.jpg)
Simple 404 Error page, which was developed by vineeth.tr. Moreover, you can customize it according to your wish and need.

**Author**:	vineeth.tr
**Created on**:	April 12, 2016
**Made with**:	HTML & CSS(SCSS)
**Tags**:	Simple 404 Error page
{% codepen https://codepen.io/vineethtrv/pen/YqeBVJ %}

### #18: HTML CSS 404 Crying Baby Page Template

![HTML CSS 404 Crying Baby Page Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4uzokzc7j4earvwcatry.jpg)

HTML CSS 404 Crying Baby Page Template, which was developed by vineeth.tr. Moreover, you can customize it according to your wish and need.

**Author**:	vineeth.tr
**Created on**:	October 12, 2016
**Made with**:	HTML(Pug) & CSS(SCSS)
**Tags**:	HTML CSS 404 Crying Baby Page Template
{% codepen https://codepen.io/vineethtrv/pen/NRzNLz %}

### #19: CSS Train 404 Page

![CSS Train 404 Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ni8xsa9danryr9eupcn.jpg)
CSS Train 404 Page, which was developed by Carla. Moreover, you can customize it according to your wish and need.

**Author**:	Carla
**Created on**:	November 3, 2018
**Made with**:	HTML & CSS
**Tags**:	CSS Train 404 Page
{% codepen https://codepen.io/ckroll17/pen/MzWgLo %}

### #20: Pure CSS Animated 404 error page template

![Pure CSS Animated 404 error page template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yun3195yl313k0awytz.jpg)

Pure CSS Animated 404 error page template, which was developed by Sergio. Moreover, you can customize it according to your wish and need.

**Author**:	Sergio
**Created on**:	March 27, 2018
**Made with**:	HTML & CSS(SCSS)
**Tags**:	Pure CSS Animated 404 error page template
{% codepen https://codepen.io/SofiaSergio/pen/RMjyRL %}

### #21: SVG 404 page not found template

![SVG 404 page not found template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2njg9qdgyp3n6ujzvht4.jpg)
SVG 404 page not found template, which was developed by Sylvain Lepinard. Moreover, you can customize it according to your wish and need.

**Author**:	Sylvain Lepinard
**Created on**:	August 9, 2019
**Made with**:	HTML & CSS(SCSS)
**Tags**:	SVG 404 page not found template
{% codepen https://codepen.io/Sylvain_Lepinard/pen/GVXvZQ %}

### #22: Fully responsive 404 page

![Fully responsive 404 page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqp6i8e0i74wi5a3c3w0.jpg)
Fully responsive 404 page, which was developed by Kasper De Bruyne. Moreover, you can customize it according to your wish and need.

**Author**:	Kasper De Bruyne
**Created on**:	February 18, 2020
**Made with**:	HTML, CSS(SCSS) & JS
**Tags**:	Fully responsive 404 page
{% codepen https://codepen.io/kdbkapsere/pen/oNXLbqQ %}

### #23: Responsive custom 404 page

![Responsive custom 404 page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8k06xfdgcj5lhoa3xtmn.jpg)
Responsive custom 404 page, which was developed by Ash. Moreover, you can customize it according to your wish and need.

**Author**:	Ash
**Created on**:	September 28, 2017
**Made with**:	HTML & CSS
**Tags**:	Responsive custom 404 page
{% codepen https://codepen.io/ashhoe/pen/PJmjxj %}

### #24: Wild West 404 Error page Concept

![Wild West 404 Error page Concept](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06898qih0q3d0icmqs2m.jpg)
Wild West 404 Error page Concept, which was developed by Zissis Vassos. Moreover, you can customize it according to your wish and need.

**Author**:	Zissis Vassos
**Created on**:	August 26, 2019
**Made with**:	HTML & CSS
**Tags**:	Wild West 404 Error page Concept
{% codepen https://codepen.io/zvassos/pen/wvwJZwo %}

### #25: html template 404

![html template 404](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02f85ohejjo74izo670t.jpg)
html template 404, which was developed by Jhey. Moreover, you can customize it according to your wish and need.

**Author**:	Jhey
**Created on**:	March 23, 2020
**Made with**:	HTML(Pug), CSS & JS
**Tags**:	html template 404
{% codepen https://codepen.io/jh3y/pen/BaNOJWK %}

### #26: Windows 10 style 404 error design

![Windows 10 style 404 error design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhbmul2f09xhcmtbp58s.jpg)
Windows 10 style 404 error design, which was developed by Marco Peretto. Moreover, you can customize it according to your wish and need.

**Author**:	Marco Peretto
**Created on**:	February 8, 2019
**Made with**:	HTML & CSS
**Tags**:	404 error design
{% codepen https://codepen.io/mperetto/pen/QYQEGK %}

### #27: 404 Error Page: Animated SVG GSAP

![404 Error Page: Animated SVG GSAP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddyxrg1iuw55sjxnzx7z.jpg)
404 Error: Animated SVG GSAP, which was developed by christine i. Moreover, you can customize it according to your wish and need.

**Author**:	christine i
**Created on**:	February 22, 2020
**Made with**:	HTML, CSS & js
**Tags**:	404 Error
{% codepen https://codepen.io/christinei/pen/bGdBqqz %}

### #28: Custom 404 error page design

![Custom 404 error page design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbquxkvc8xpd4cupcnyp.jpg)
Custom 404 error page design, which was developed by Muhammad Rauf. Moreover, you can customize it according to your wish and need.

**Author**:	Muhammad Rauf
**Created on**:	December 3, 2021
**Made with**:	HTML & CSS
**Tags**:	Custom 404 error page design
{% codepen https://codepen.io/softcodeon/pen/QWqjwLY %}

### #29: Oops! page not found template

![Oops! page not found template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28wck780ldhb342v6rjo.jpg)
Oops! page not found template, which was developed by Swarup Kumar Kuila. Moreover, you can customize it according to your wish and need.

**Author**:	Swarup Kumar Kuila
**Created on**:	August 14, 2020
**Made with**:	HTML & CSS
**Tags**:	page not found template
{% codepen https://codepen.io/uiswarup/pen/XWdXGGV %}

### #30: Awesome 404 page not found

![Awesome 404 page not found](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vmftbp1grjryxbh4qmp.jpg)
Awesome 404 page not found, which was developed by gavra. Moreover, you can customize it according to your wish and need.

**Author**:	gavra
**Created on**:	April 19, 2014
**Made with**:	HTML, CSS & JS
**Tags**:	Awesome 404 page not found
{% codepen https://codepen.io/gavra/pen/VwaNXN %}

### #31: Error 404: Monument Valley inspiration

![Error 404: Monument Valley inspiration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnonfb7igrxwgn18n0qa.jpg)
Error 404: Monument Valley inspiration, which was developed by Sussie Casasola. Moreover, you can customize it according to your wish and need.

**Author**:	Sussie Casasola
**Created on**:	April 29, 2018
**Made with**:	HTML(Pug) & CSS(Sass)
**Tags**:	Error 404
{% codepen https://codepen.io/SusCasasola/pen/mLREVP %}

### #32: 404 page

![404 page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0f3w9evua2jo9klsrqi.jpg)
404 page, which was developed by Julia. Moreover, you can customize it according to your wish and need.

**Author**:	Julia
**Created on**:	September 7, 2018
**Made with**:	HTML & CSS(Sass)
**Tags**:	404 page
{% codepen https://codepen.io/JuliaSS/pen/ZMaXQV %}

### #33: 404 SVG Error Based Page

![404 SVG Error Based Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wumzav05q969rfiatmhp.jpg)
404 SVG Error Based Page, which was developed by Dave Pratt. Moreover, you can customize it according to your wish and need.

**Author**:	Dave Pratt
**Created on**:	September 6, 2017
**Made with**:	HTML & CSS(SCSS)
**Tags**:	404 SVG Error Based Page
{% codepen https://codepen.io/strength9/pen/vJwLox %}

### #34: bootstrap 404 error page template

![bootstrap 404 error page template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbd2d5avv8z4w0khdm53.jpg)
bootstrap 404 error page template, which was developed by Aji. Moreover, you can customize it according to your wish and need.

**Author**:	Aji
**Created on**:	June 26, 2021
**Made with**:	HTML & CSS
**Tags**:	bootstrap 404 error page template
{% codepen https://codepen.io/uidesignhub/pen/vYmBKpj %}

### #35: Cool 404 error page

![Cool 404 error page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xiyj0imd5qbnz483qpl2.jpg)
Cool 404 error page, which was developed by Anton Lukin. Moreover, you can customize it according to your wish and need.

**Author**:	Anton Lukin
**Created on**:	November 1, 2018
**Made with**:	HTML & CSS
**Tags**:	Cool 404 error page
{% codepen https://codepen.io/lukin/pen/vVoKVZ %}

### #36: 404 error template

![404 error template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgm8lteve2yc1ynrjxb5.jpg)
404 error template, which was developed by Natalia. Moreover, you can customize it according to your wish and need.

**Author**:	Natalia
**Created on**:	January 4, 2021
**Made with**:	HTML & CSS
**Tags**:	404 error template
{% codepen https://codepen.io/nat_boc/pen/gOwzbpw %}

## Our Awesome Tools
### #01: [Lenny Face](https://tools.stackfindover.com/lenny-face/)
### #02: [Fancy Text Generator](https://tools.stackfindover.com/fancy-text-generator/)