17 HTML and CSS 404 Page Templates
Tags: html, css, frontend
Published: 2023-06-13 21:14:31

Collection of HTML and CSS 404 error page templates. Hand-picked from codepen.io. The Collection is free.

original article on [Frontend Solutions ](https://www.solutions-blog.tech/): [19 HTML and CSS 404 page Templates](https://www.solutions-blog.tech/posts/awesome-19-custom-404-page)

## 1. Space 404

![Demo Image: Space 404 - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v77b0x9qq6621l96i9ct.png)

Made with: **HTML / CSS / JavaScript**

Created by **Jared Rowe** , Created At **December 22, 2016**

Responsive : **no**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/Jarowe/pen/KNYxKe" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 2. Space 404

![Demo Image: Space 404 - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cc2iszxmkshj1omn1pcp.jpg)

Made with: **HTML / CSS (SCSS) / JavaScript**

Created by **Ethan** , Created At **November 18, 2019**

Responsive : **no**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/eroxburgh/pen/zYYyEPg" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 3. 404 Page

![Demo Image: 404 Page - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p28qhs0q18d8dmw57muf.jpg)

Made with: **HTML / CSS (SCSS) / JavaScript**

Created by **Rafaela Lucas** , Created At **November 27, 2019**

Responsive : **yes**

Dependencies : **parallax.js**, **jquery.js**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/rafaelavlucas/pen/NWWQNjZ" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 4. GSAP 404 typed message using SplitText

![Demo Image: GSAP 404 typed message using SplitText - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14gz5uweeeouiedyzojw.png)

Made with: **HTML / CSS (SCSS) / JavaScript**

Created by **Selcuk Cura** , Created At **October 21, 2017**

Responsive : **no**

Dependencies : **TweenMax.js** , **jquery.js** , **SplitText.js**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/selcukcura/pen/XeQpEv" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 5. 404 Error Page

![Demo Image: 404 Error Page - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngz20bdpb73x3xn1apug.jpg)

Made with: **HTML / CSS**

Created by **Ricardo Prieto** , Created At **November 4, 2017**

Responsive : **no**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/ricardpriet/pen/qVZxNo" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 6. Bubbley 404

![Demo Image: Bubbley 404 - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ykuq7cbvq6ji8o1ng3gq.png)

Made with: **HTML (Pug) / CSS (SCSS)**

Created by **Kyle Lavery** , Created At **May 1, 2016**

Responsive : **no**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/kylelavery88/pen/pyQNoP" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

<center> <a href="https://dribbble.com/shots/2662486-Dubble-Bubble-404-Page" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">dribbble shot</a> </center>

---

## 7. 404 Error Page

![Demo Image: 404 Error Page - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73yqholy7csfxz50jeg1.jpg)

Made with: **HTML / CSS**

Created by **Ricardo Prieto** , Created At **November 5, 2017**

Responsive : **no**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/ricardpriet/pen/zPqyvY" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 8. 404 Makes bear sad 🐻😭

![Demo Image: 404 Makes bear sad - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hvoqazrv0qhq93b9n90.jpg)

Made with: **HTML (Pug) / CSS (Stylus) / JavaScript (Babel)**

Created by **Jhey** , Created At **March 22, 2020**

Responsive : **yes**

Dependencies : **react-dom.js**, **react.js**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/jh3y/pen/BaNOJWK" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 9. 404 Page

![Demo Image: 404 Page - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ieyprna9xduyfrsgkiuw.png)

Made with: **HTML / CSS (SCSS) / JavaScript (Babel)**

Created by **Kasper De Bruyne**, Created At **February 18, 2020**

Responsive : **yes**

Dependencies : **Bootstrap.css**, **gsap.js**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/kdbkapsere/pen/oNXLbqQ" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 10. Illustration for 404 Page

![Demo Image: Illustration for 404 Page - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7g1o5klf1nyqbgkuls11.png)

Made with: **HTML / CSS (Less) / JavaScript**

Created by **Ken Chen**, Created At **October 11, 2014**

Responsive : **no**

Dependencies : **snap.svg.js**, **jquery.js**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/kenchen/pen/MWxZVY" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 11. 404 page

![Demo Image: 404 page - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5ohan2u5nxlghf1pyeh.png)

Made with: **HTML / CSS (SCSS)**

Created by **Bidji**, Created At **October 28, 2016**

Responsive : **no**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/Bidji/pen/rMgQON" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 12. 404 error page

![Demo Image: 404 error page - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c525cp38i71bnhja935v.png)

Made with: **HTMl / CSS / JavaScript**

Created by **Swarup Kumar Kuila**, Created At **February 7, 2020**

Responsive : **yes**

Dependencies : **bootstrap.css**, **anime.js**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/uiswarup/pen/dyoyLOp" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 13. CSS 404 page

![Demo Image: CSS 404 page - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/659yrn3ejj7gh83nqbso.png)

Made with: **HTMl / CSS (SCSS)**

Created by **agathaco**, Created At **July 28, 2018**

Responsive : **yes**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/agathaco/pen/WKXREy" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 14. 404 page

![Demo Image: 404 page - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ckz6ilp8x1q457shwl9w.png)

Made with: **HTMl / CSS**

Created by **Thea**, Created At **September 5, 2018**

Responsive : **yes**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/HighFlyer/pen/LJjzKQ" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 15. Neon 404 Page Not Found

![Demo Image: Neon 404 Page Not Found - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kq6ck6p1n38f0iatuzfx.png)

Made with: **HTMl / CSS**

Created by **Tibix**, Created At **August 27, 2019**

Responsive : **no**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/Tibixx/pen/GRKmppz" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 16. BSOD 404 Page

![Demo Image: BSOD 404 Page - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crwrg2w1i9gg19ue2rq1.png)

Made with: **HTMl / CSS (SCSS)**

Created by **Ian Gloude**, Created At **June 15, 2016**

Responsive : **no**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/igloude/pen/qNNWKr" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 17. 404 paozinho

![Demo Image: 404 paozinho - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3unylaikc5szu0gnuyh.png)

Made with: **HTMl / CSS**

Created by **Genaro Colusso**, Created At **March 31, 2020**

Responsive : **yes**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/genarocolusso/pen/XWbGMLp" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## <center> thanks for reading. </center>