Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
The best 404 pages do two things at once: explain that the requested page is unavailable and make it easy to continue. Illustration, humor, games, and other creative ideas can make the experience feel like part of the site—but only when the message and recovery options remain clear, usable, and accessible.
Here are 31 examples and patterns described in published collections, followed by practical criteria for adapting them. The examples are inspiration, not independently tested live-site reviews or evidence of measured business results.
What makes a good 404 page?
A 404 page is the screen visitors see when a site cannot provide the page they requested. A useful design states the problem plainly, preserves enough site context to orient visitors, and offers a sensible next step.
- Clarity: Say that the page was not found or is unavailable; do not make visitors decode a joke or illustration.
- Recovery: Offer a prominent search, a relevant link, or a route to the homepage. A search is especially helpful when the site has a large catalog or archive.
- Brand fit: Use a voice and visual treatment that make sense for the audience and product.
- Accessibility and function: Ensure navigation, links, search, and interactive elements work with a keyboard and assistive technology, and that the page adapts to different screen sizes.
- Complexity versus value: Animation or a game should not obscure the error message or make the way forward harder to find.
The UK Government’s CMS Design System recommends retaining the standard header and footer, using clear and valid links, and making the page responsive. It also advises notifying screen-reader users and checking keyboard use, zoom, and screen-reader flow. See its page not found pattern.
#1 Best Overall
31 404 page examples and creative patterns
The following examples are attributed to the collections that describe them: Colorlib’s roundup dated October 2, 2026; Webflow’s article, last updated October 24, 2025; and Built for Mars’ collection, updated September 23, 2026. These descriptions are editorial examples rather than independent observations or usability tests.
Brand-led humor and illustration
- Maxemail: Colorlib describes an illustration of a team pointing toward the missing page, turning the error into a playful group moment.
- Novak Djokovic: Colorlib describes a lost-balls joke that uses tennis imagery to fit the subject.
- Espry: Colorlib highlights a confused dog as a lighthearted visual for the dead end.
- Petfinder: Colorlib describes a cat-themed page that keeps menu and call-to-action elements in view, combining a pet-centered visual with site navigation.
- Textio: Webflow features its “Unicorn of Missing Pages,” a branded character-based treatment.
- D&D Beyond: Webflow describes fantasy-themed copy paired with menu and search options, tying the message to the site’s audience while providing routes onward.
Clear recovery and useful navigation
- FlixelPix: Colorlib describes a visible error message alongside a search box, pairing explanation with a direct recovery tool.
- Swissmiss: Colorlib notes that the page offers both search and a homepage option.
- Petfinder’s retained navigation: Its menu and CTA, as described by Colorlib, show how a 404 can remain connected to the rest of a site rather than becoming an isolated screen.
- D&D Beyond’s menu and search: Webflow’s example combines themed copy with familiar navigation and a way to search.
- Dribbble: Webflow describes color browsing and search for designs or designers, giving visitors discovery routes that fit a creative portfolio community.
Search and discovery as the experience
- Dribbble’s color browsing: Its color-based discovery option, described by Webflow, turns a dead end into a way to explore visual work.
- Dribbble’s design and designer search: The same example includes search for designs or designers, a useful alternative when visitors have a specific destination in mind.
- Built for Mars’ interactive color slider: The collection describes a slider that displays images by color, using exploration as the recovery experience.
Games and small interactions
- Space Invaders: Webflow includes a 404-page example with a Space Invaders game, using a familiar arcade interaction to make the error memorable.
- Snake: Webflow also features a page with a Snake game, another lightweight play pattern.
- Interactive toggles: Webflow’s collection includes 404 pages with toggles, showing how a small interaction can add personality without requiring a full game.
These interactions work best as optional extras. The visitor should still be able to understand the error and find a recovery route without playing or manipulating anything.
Rank #2
Product demonstrations and archive-based ideas
- Figma: Built for Mars lists an editable 404, illustrating how a design product can make the error page an expression of its own tools.
- Mobbin: Built for Mars describes a designer quiz that draws on its archive, turning existing product material into an interaction.
- Codecademy: Built for Mars lists a game that promotes the site’s games course, linking the page’s activity to a product offering.
These are product-specific approaches, not universal formulas. An archive quiz or course tie-in is most relevant when the site already has suitable content and the suggestion does not distract from the visitor’s original task.
Templates as a starting point
- Webflow cloneable pages: Webflow’s article links 404 pages that Webflow users can clone and adapt.
- Colorlib template resources: Colorlib’s roundup links template resources for designers looking for a starting point.
A template can speed up layout work, but it still needs the right site navigation, accurate error handling, and accessible controls. Treat the remaining examples in the collections as additional visual references rather than tested recommendations: the sources do not establish a consistent evaluation method or comparable performance results across all entries.
Rank #3
- New
- Mint Condition
- Dispatch same day for order received before 12 noon
- Guaranteed packaging
- No quibbles returns
How to choose an idea for your own 404 page
Start with the visitor’s next step
Decide what a visitor who has landed on a missing URL is most likely to need. A search box is useful for a broad catalog; a homepage link may suit a smaller site; and a small set of relevant links can help when the site has clear sections. Keep the primary route easy to spot.
Match the creative treatment to the site
Use an illustration, joke, visual metaphor, or interaction only if it fits the brand and audience. A playful tone can soften a frustrating moment, but it should not make the page’s meaning ambiguous. If the idea depends on a visitor understanding a reference or completing an interaction, keep a plain explanation and navigation available too.
Check accessibility and responsive behavior
- Keep the standard header and footer where they help visitors orient themselves.
- Use descriptive link text and ensure links lead to valid destinations.
- Make search and other controls reachable and usable by keyboard.
- Ensure assistive technology users are informed that the requested page is unavailable.
- Check the layout at different viewport sizes and zoom levels; test the screen-reader reading order.
- Do not make animation, color alone, or a game the only way to understand the message or continue.
These checks follow the practical guidance in the CMS Design System’s 404 pattern.
A custom 404 design does not determine the HTTP status
The visual page and the server’s HTTP response are separate parts of the implementation. RFC 9110, Section 15.5.5, defines 404 as a response indicating that the origin server did not find a current representation for the requested resource or is unwilling to disclose one. It does not say whether the absence is temporary or permanent. If the server knows the resource is likely permanently gone, RFC 9110 says 410 is preferred. Read RFC 9110, Section 15.5.5.
Best Value
That distinction matters when building a custom page: a polished design does not make an incorrect status technically correct. Avoid treating a blanket redirect of every missing URL to the homepage as a substitute for handling each missing resource appropriately. The CMS Design System describes page content and behavior; apply its user-facing guidance alongside the site’s server configuration.
What these examples can—and cannot—show
Published collections are useful for discovering creative directions, including illustrations, jokes, browsing interactions, games, and product-specific demonstrations. They do not, by themselves, establish that any particular pattern improves engagement, conversions, or visitor retention. Choose an idea for its clarity, fit, and usability—not an assumed business result.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
