DEV Community

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

Posted 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)