1. Web Design
  2. Inspiration

Sorry About This: 40 Examples of 404 Pages

This post is part of a series called Weeks of Web Design Inspiration.
Best Photography Portfolio Themes for WordPress
Current Web Design Trends: Full-on Full Screen Home Pages

404 error pages are a great opportunity to show off a website’s personality, whilst offering help to potentially confused users. If you’ve launched a website without having considered error pages, you should address that right away.

This is a rapid fire, fun look at 404 pages from around the web–and we’re going to categorise them as follows:

  • Offering Assistance
  • The Art of Distraction
  • Providing Amusement
  • Pleasing Aesthetics
  • Sincere Apologies
  • A Touch of Personality

Four-O What?

To learn more about how to serve custom error pages, take a look at .htaccess Files for the Rest of Us by Dan Wellman. For WordPress specifically, try How To Create A Simple 404 Error Page For WordPress Themes.

Offering Assistance

Perfectly functional, exactly what you want from

Crystal clear message from

Functional from Foursquare

Netflix, showing that they don’t need to bother with extraneous bells and whistles

To be brutally honest; I would have expected to offer some route to continue onwards. They provide a way for users to report broken links, which is great, but the flow is still interrupted by a lack of search input or home link.

Invision arguably do a more thorough job of the same approach, including a way forward at the very least

The Art of Distraction

You know it’s coming, but I guarantee you’ll still punch in the wrong command a few times to hear it (good job @BenjaminReid and @iamkeir–thanks for the suggestion David Darnes).

Oh no, I was hoping to find–wait, are those bézier handles?!

There’s really only one reason you’d be visiting the 1403 Vintage Mono Pro website anyway, so why not test out the typeface if you come unstuck?

Kittens. Thank you

Hover over this owl built with HTML and CSS..

Providing Amusement

Vincent Vega’s having trouble finding where he’s supposed to be on

Great animation from

If you’re a fan of the I.T. Crowd (you are, right?) I won’t need to tell you what’s going on in this GIF. Check out for the original.

Zombie shows a nice, animated, rotting hand. Very atmospheric.

More GIFs, more violence, from Thanks to Luke Meehan for this suggestion.

Swearing elephants on

Self-deprecation from Hillary and Donald

Some amusing copy from email newsletter platform

This is a nice one from (make sure you have your volume up, or you’ll miss the sound of a defecating cow.)

Teehan+Lax are no longer active as an agency, but happily their 404 lives on. T+L loved injecting humour into their personal products; this error page is no exception, taking inspiration from “awkward family photos”

Pleasing Aesthetics

Calming and attractive, from Tubik Studio.

Illustrations, like this one from, will always make me forget any frustrations I have.

Slack point out that this delightful scrolling scene probably isn’t the place we were after. Though with its gambolling rabbits and cheerful flora I don’t really have a problem being there

Built by Tiffany Rayside with Google fonts and a whole bunch of CSS. Nothing else.

GIF magic and Pacman from Arthur MB.

The Emerald 404 pages collection comprises 24 variants, all of which are straight forward and get to the point.

RPZ is a collection of two page designs, each with four colour alternatives. Simple and clean.

Sincere Apologies

Apologies from the team at

Likewise from Litmus

A Touch of Personality

Biased? Perhaps, but I’ve always loved the animated computer terminal seen on our own 404 Nice one Jacob!

Fork CMS, taking advantage of a classic brand/pun combination

Recognize these footprints?

This highly stylized flight ticket “lost in the clouds” is a great way of presenting a 404 error.

Great sentiment from Adidas–what else would you expect from one of the world’s biggest motivators?

MailChimp, those masters of adding personality to products, use their mascot Frederick von Chimpenheimer IV in the event of a missing email campaign

I think we know whose 404 this is, right?

This, from I’m sure it means something.

Momentary disorientation from

And then there’s Collis.

Wrapping up

These examples should inspire you to get creative with your own 404 error pages. Remember:

  • Offer assistance–ideally a way forward, such as suggested links or a search input.
  • Use distraction if you feel it’s appropriate (your users may well be frustrated at having reached a 404 error).
  • Provide amusement (again, if it’s appropriate) and keep the language human.
  • Offer a touch of personality.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.