DEV Community

Cover image for 17 HTML and CSS 404 Page Templates
Frontend Solutions
Frontend Solutions

Posted on • Edited on

17 HTML and CSS 404 Page Templates

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

original article on Frontend Solutions : 19 HTML and CSS 404 page Templates

1. Space 404

Demo Image: Space 404 - Frontend Solutions

Made with: HTML / CSS / JavaScript

Created by Jared Rowe , Created At December 22, 2016

Responsive : no

Dependencies : -

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

Demo and code

2. Space 404

Demo Image: Space 404 - Frontend Solutions

Made with: HTML / CSS (SCSS) / JavaScript

Created by Ethan , Created At November 18, 2019

Responsive : no

Dependencies : -

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

Demo and code

3. 404 Page

Demo Image: 404 Page - Frontend Solutions

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

Demo and code

4. GSAP 404 typed message using SplitText

Demo Image: GSAP 404 typed message using SplitText - Frontend Solutions

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

Demo and code

5. 404 Error Page

Demo Image: 404 Error Page - Frontend Solutions

Made with: HTML / CSS

Created by Ricardo Prieto , Created At November 4, 2017

Responsive : no

Dependencies : -

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

Demo and code

6. Bubbley 404

Demo Image: Bubbley 404 - Frontend Solutions

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

Demo and code
dribbble shot

7. 404 Error Page

Demo Image: 404 Error Page - Frontend Solutions

Made with: HTML / CSS

Created by Ricardo Prieto , Created At November 5, 2017

Responsive : no

Dependencies : -

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

Demo and code

8. 404 Makes bear sad 🐻😭

Demo Image: 404 Makes bear sad - Frontend Solutions

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

Demo and code

9. 404 Page

Demo Image: 404 Page - Frontend Solutions

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

Demo and code

10. Illustration for 404 Page

Demo Image: Illustration for 404 Page - Frontend Solutions

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

Demo and code

11. 404 page

Demo Image: 404 page - Frontend Solutions

Made with: HTML / CSS (SCSS)

Created by Bidji, Created At October 28, 2016

Responsive : no

Dependencies : -

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

Demo and code

12. 404 error page

Demo Image: 404 error page - Frontend Solutions

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

Demo and code

13. CSS 404 page

Demo Image: CSS 404 page - Frontend Solutions

Made with: HTMl / CSS (SCSS)

Created by agathaco, Created At July 28, 2018

Responsive : yes

Dependencies : -

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

Demo and code

14. 404 page

Demo Image: 404 page - Frontend Solutions

Made with: HTMl / CSS

Created by Thea, Created At September 5, 2018

Responsive : yes

Dependencies : -

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

Demo and code

15. Neon 404 Page Not Found

Demo Image: Neon 404 Page Not Found - Frontend Solutions

Made with: HTMl / CSS

Created by Tibix, Created At August 27, 2019

Responsive : no

Dependencies : -

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

Demo and code

16. BSOD 404 Page

Demo Image: BSOD 404 Page - Frontend Solutions

Made with: HTMl / CSS (SCSS)

Created by Ian Gloude, Created At June 15, 2016

Responsive : no

Dependencies : -

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

Demo and code

17. 404 paozinho

Demo Image: 404 paozinho - Frontend Solutions

Made with: HTMl / CSS

Created by Genaro Colusso, Created At March 31, 2020

Responsive : yes

Dependencies : -

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

Demo and code

thanks for reading.

Top comments (0)