19 creative 404 pages that show off clever design

A collection of some of the best 404 page examples that go beyond the standard error message by using creative design and copy.

No items found.

The best 404 pages make the most of an unfortunate error.

Rather than sticking to the standard “page not found” messaging,  savvy web designers use 404 error pages to showcase a bit of the brand’s personality, deliver a laugh, or even entertain us with a mini video game. 

Thoughtfully designing a page that only shows up when things go wrong may seem pointless, but it’s actually a chance to keep visitors engaged. So before you add a basic “oops, page not found” message, take a look at some of the more imaginative examples I’ve stumbled upon. 

Funny 404 pages

These lighthearted and playful 404 pages soften the blow of clicking on a broken link by charming lost visitors with a touch of humor. 

Thomas Bosc

Content manager Thomas Bosc has a thoughtfully designed site with scroll-triggered animations, gorgeous visuals, and past projects that showcase their web design skills. Perhaps that’s why landing on this basic page with a childhood photo of a hopeful wizard made me truly laugh out loud. 

An image of Thomas Bosc's 404 page on his site. It shows a picture of him as a child riding a broom, pretending he is Harry Potter.

This 404 page has a little surprise, too. When clicked, young Thomas flies away to reveal text “404”  and a link back to the homepage. 

Polo Garcia

Designer Polo Garcia catches us off guard by taking us from a clean, contemporary site design to a grainy animation of a waterskiing squirrel on his 404 page. 

An image of Polo Garcia's 04 page on his site. It shows an image of a waterskiing squirrel with the headline "Oh oh, lost in the sea?"

Even the squirrel eventually turns to look at the screen as if it’s asking site visitors — what are you doing here? Polo delivers a laugh but keeps the user experience fluid by including an obvious “take me back home” button. 

CreativeX

CreativeX opens with the classic “oops, that page can’t be found” message, but makes it their own with the brand’s robot illustration and a dash of humor. 

An image of CreativeX's website 404 page. It has an image of a cartoon robot malfunctioning with the headline "Oops, that page cant' be found."

The flustered robot is a fun addition, but the stammering excuse is what earned a chuckle — claiming that “it’s probably…like..the internet is broken or something” before guiding us back to the homepage. 

Mill 3 Studio

Mill 3 Studio captures the feeling of landing on a 404 page perfectly with a gif of a lost and confused John Travolta. 

Mill 3 Studio's 404 page. It is simple, showing a big 404 as the headline with an image of a lost and confused John Travolta.

The simplicity is what makes this 404 error amusing — there is no apology or explanation, just a dude looking like you probably feel. Luckily, this error page maintains the top navigation menu and the footer, so we can quickly navigate to other areas of the website. 

Creative 404 pages

Who said 404 page design had to be boring? These error pages stand out with more imaginative designs. 

Textio

If we get lost on Textio’s website, we’re greeted by the Unicorn of Missing Pages. 

An image of Textio's 404 page site. It shows the image of unicorn with a rainbow horn, and tells users that they have discovered the "Unicorn of Missing Pages."

Seeing as Textio is an augmented writing tool, it’s nice to see them play around with words on their 404 page. Bonus points for working the link back to the homepage into some philosophical advice from the unicorn. 

Dribbble

Dribbble makes clever use of their 404 page by nudging us towards designs categorized by color rather than sending us straight to the homepage. 



Dribbble exists to showcase design work, so it’s cool to see them embody that mission with their 404 page. From here, we can either select a color we’re interested in or use the search box to look for a specific design or designer.  Both options put the focus on eye-catching design rather than Dribbble as a brand. 

DFY

Rather than “page not found,” DFY’s 404 page pairs “design not found” with an astronaut who is slowly floating away. 

An image of DFY's website 404 page. The headline shows an astronout floating in space with he headline "Design Not Found, Don't Let Go, Let's Go Home" With a coundown clock indicating when you'd be redirected back to the home page.

DFY adds to the drama by telling us not to let go as a timer counts down from 10 seconds before automatically navigating back to the homepage. 

On-brand 404 pages

Generic 404 pages can be jarring because they feel like the brand is breaking character, taking us out of the site experience. These 404 page examples showcase brands that extended their signature voice and style to their error messages. 

D&D Beyond

D&D Beyond speaks directly to their Dungeons and Dragons-loving audience with an error message that claims a halfling may have stolen whatever website visitors are looking for and hid it in another realm. 

D&D Beyond's website 404 page that shows characters from Dungeons and Dragons looking for their way home.

Both the illustration and accompanying message keep us in the D&D world. We may have stumbled onto a missing page, but we have clues and tools to work past this obstacle. In this case, those tools are page features such as the menu and search bar along with footer links. 

Spotify

Spotify hits us with an error message that sounds like a playlist, “404s and heartbreaks,” next to  a spinning record. 

An image of Spotify's 404 page. It's headlined 404s and heartbreaks with a cartoon image of a record on a record player.

Spotify keeps the main navigation bar at the top of the page and includes links to helpful resources in the error message. No one aims to land on a 404 page — unless you’re collecting them for an article, of course — so pointing people to FAQs is a nice touch. It’s the difference between hitting a roadblock and seeing signs for a detour — one is a deadend while the other is an alternate route. 

OK Micah

If we get a little lost on OK Micah’s site, “the hot man” will gently guide us back home. 

OK Micah's 404 page, which contains an image of a brown haired man in a flannel with his finger wagging at you. The headline reads, "You're in the wrong place boo!"

OK Micah keeps their voice and style consistent with quippy copy and a sassy dude wagging his finger at us. This landing page also maintains the top navigation bar and footer, wrapping the error page in a familiar frame. 

Color of the year

Pantone’s color of the year web page keeps the theme going with their error page by using Pantone 404 C as the background color. 

Pantone's 404 page. It shows off the background gray-brown color of Pantone 404c — a play on the idea of a "404" page.

It’s a simple error page for a straightforward website. There aren’t extra page features cluttering the landing page either — just a small circle cursor that expands to highlight the “main” button when we hover over it. 

Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Subscribe to be a Webflow Insider
Thank you! You are now subscribed!
Oops! Something went wrong while subscribing.
Get started for free

Interactive 404 pages

While many 404 pages focus on getting lost visitors back to the homepage, these landing pages use engaging website design to invite you to stick around.

Kualo

Kualo delights us with a branded version of the old school video game, Space Invader. 

An image of the Kualo website 404 page. It reads "Oh no! Space Invaders destroyed this page! Take revenge on them!" And contains a game to play while you remain on the page.

Instead of using the immediate call to action (CTA) to send us back home, Kualo challenges us to take revenge on pixelated space invaders that spell out “kualo.” This fully functional game is an entertaining surprise. We can keep playing until we run out of lives, at which point a “you lost!” message appears. But once again, Kualo reels us back in — promising a discount on their hosting for anyone who can score over 1,000. 

Nouvelle

Nouvelle also serves up throwback with a grainy control console with a thick blinking cursor on their 404 error page. 

An image of Nouvelle's website 404 page. It contains surprise easter eggs as you type different website commands onto the page.

The control console prompts us to use the “help” command, then offers four additional options. We don’t want to spoil the surprises, so just trust when we say that trying out the “trex” command is worth it. It’s clear that the web designer behind this error page loves memes, easter eggs, and general silliness. Try some unscripted commands in the control console and you’ll see what we mean. 

Feldman Studio

Before you click, you might want to prepare yourself — Feldman Studio’s 404 error page gives you just 3 seconds to get ready to play. 

Feldman Studio's 404 page. It prompts you into a game of snake.

After the countdown, the page design comes to life as an old school game of snake. The line below 404 becomes the snake that chases the period. Each time you gobble up a dot, the 404 counts down. If you want to see what happens when it hits zero you’ll just have to eat 404 little dots without mistakes — good luck! 

MAD

Anyone who loves popping bubble wrap will enjoy MAD’s 404 page. Instead of bubbles to pop, this error page spells out 404 in with toggles we can flip on and off to either erase the number or spell out our own message. 

MAD's 404 page. It contains toggles that appear green or gray depending on which way you flip them. The initial toggle formation spells out 404, but you can flip it on or off to spell your own message.

It’s a simple but enjoyable user experience. We can choose to interact or use the menu at the bottom of the page to navigate to other parts of the website. 

Kffein

Kffein’s 404 page design serves up “I can haz cheeseburger” internet cat vibes with a shower of cats in bubbles falling and bouncing around.

An image of Kffein's 404 page. It contains the I can haz cheesburger memes in bubbles that bounce around the page.

The interactive aspect comes in after the cat bubbles settle into the bottom of the page. From there, we can click and grab the bubbles to toss them around. Each time you click, a recording of a human imitating a cat plays and if you fling a cat off the page, it eventually falls back down. 

Cloneable 404 pages

If Webflow is your website builder of choice, get a head start on your error page design with these cloneable 404 page templates. 

The Asset

The Asset by NoCodeMachine features a 3D cube made of rainbow-colored 404s. 

An image of the Asset's 404 cloneable page. It shows off a 3d cube that is made up of the number 404.

The cube shifts as it follows our mouse cursor and the big, white 404 bounces slowly up and down. This template also includes a basic menu at the bottom with spots for social media accounts and a homepage. 

Playing around with animation

Benjamin Le Goff’s 404 page template announces we are lost in space with the message, “oops, the spaceship left without you…The page you requested could not be found.”

Benjamin Le Goff's 404 page. It has a headline that reads "Lost in Space" with an animated space background.

Ben includes a surprise scroll-triggered animation — when we scroll down the message disappears and the stars rearrange to form a 404 constellation.

404 animated knob hanger

Eloy Be’s minimalistic 404 page template features a swinging door hanger, much like the “do not disturb” signs we see in hotels. 


Eloy Be's 404 animated knob hanger. On the animated hanger it reads "404 Not Found"

The “404 not found” sign shakes as if the door it's hanging on was just slammed shut. It’s an uncomplicated but charming design with a single link pointing us back home. And thanks to the plain design, this 404 template would work well on a variety of websites. 

Don’t neglect your 404 page

No one aims to drive traffic to missing pages, but site visitors are bound to encounter a 404 error eventually. Think twice before grabbing a standard “page not found” template, because a well-designed 404 page can be the difference between a frustrating user experience and an engaging one. 

Published

February 24, 2022

Category

Inspiration

Join the conversation

What's Webflow?

Try it for free
More about the Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Build website interactions and animations visually.

More about Interactions

CMS

Define your own content structure, and design with real data.

More about the CMS

Ecommerce

Goodbye templates and code — design your store visually.

More about Ecommerce

Editor

Edit and update site content right on the page.

More about the Editor

Hosting

Set up lightning-fast managed hosting in just a few clicks.

More about Hosting