A good 404 page admits the page is missing in plain words, keeps your navigation, and offers a way forward: a search box, links to popular pages and a way to report a broken link. It must also send a real 404 status code, or search engines treat it as a soft 404. Below are 20 designs to copy.
| Element | Why |
|---|---|
| Plain message | People should know at once that the page is missing, not that the site broke |
| Site header and footer | Keeps them inside your site with familiar navigation |
| Search box | Lets them look for what they wanted |
| Two to five useful links | Home, popular pages or the section they were probably after |
| Report link | Tells you about broken links you can fix or redirect |
| HTTP status 404 (or 410) | Stops search engines indexing the error page |
Updated
Every design below is plain HTML and CSS you can edit beside a live preview, then paste into your own 404 page. After the designs comes the part most galleries skip: making the server send the right status code.
Each design is self-contained HTML and CSS. Edit the code and the preview updates.
The baseline: message, search, a few links. Works for any business.
<main style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;max-width:520px;margin:24px auto;text-align:center">
<h1 style="font-size:28px;margin:0 0 8px">Page not found</h1>
<p style="color:#4b5563">The link may be old or mistyped. Try a search or one of these pages.</p>
<form action="/search" role="search"><input name="q" aria-label="Search" placeholder="Search the site" style="padding:10px;width:70%;border:1px solid #d1d5db;border-radius:8px"> <button style="padding:10px 14px;border-radius:8px;border:0;background:#111827;color:#fff">Search</button></form>
<p><a href="/">Home</a> · <a href="/services">Services</a> · <a href="/contact">Contact</a></p>
</main>Large outlined digits give the page a strong shape with no images.
<main style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;text-align:center;padding:16px">
<p style="font-size:120px;font-weight:900;margin:0;line-height:1;color:transparent;-webkit-text-stroke:2px #111827">404</p>
<h1 style="font-size:22px;margin:8px 0">This page is not here</h1>
<a href="/" style="display:inline-block;margin-top:8px;padding:10px 18px;border-radius:999px;background:#111827;color:#fff;text-decoration:none">Back to home</a>
</main>Message on the left, a short list of popular pages on the right. Stacks on phones.
<main style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;display:flex;flex-wrap:wrap;gap:24px;padding:16px;align-items:center">
<div style="flex:1 1 220px"><p style="color:#6b7280;margin:0">Error 404</p><h1 style="margin:4px 0;font-size:26px">We cannot find that page</h1><p style="color:#4b5563">It may have been moved or renamed.</p></div>
<ul style="flex:1 1 200px;list-style:none;padding:0;margin:0;border-left:2px solid #e5e7eb;padding-left:16px;line-height:2">
<li><a href="/pricing">Pricing</a></li><li><a href="/blog">Blog</a></li><li><a href="/help">Help centre</a></li><li><a href="/contact">Contact us</a></li>
</ul>
</main>For dark-themed sites. The soft glow keeps the headline readable without shouting.
<main style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;background:#0b1020;color:#e5e7eb;text-align:center;padding:40px 16px;border-radius:16px">
<p style="font-size:64px;font-weight:800;margin:0;color:#fff;text-shadow:0 0 18px #4f98fb">404</p>
<h1 style="font-size:20px;margin:8px 0">Lost in the dark?</h1>
<p style="color:#9ca3af">This page does not exist.</p>
<a href="/" style="color:#93c5fd">Go to the homepage</a>
</main>For online stores: turn the dead end into a browse with three popular products.
<main style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;padding:16px">
<h1 style="font-size:24px;margin:0">That product is no longer here</h1>
<p style="color:#4b5563">It may be sold out or renamed. Popular right now:</p>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px">
<a href="/p/1" style="border:1px solid #e5e7eb;border-radius:10px;padding:10px;text-decoration:none;color:#111">Canvas tote<br><b>$24</b></a>
<a href="/p/2" style="border:1px solid #e5e7eb;border-radius:10px;padding:10px;text-decoration:none;color:#111">Mug set<br><b>$18</b></a>
<a href="/p/3" style="border:1px solid #e5e7eb;border-radius:10px;padding:10px;text-decoration:none;color:#111">Print A3<br><b>$30</b></a>
</div>
</main>A mailto link with a ready subject line makes reporting a broken link one click. Add the page address to the body on your server if you can.
<main style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;max-width:480px;margin:16px auto">
<h1 style="font-size:24px">Page not found</h1>
<p>If you followed a link from our site, please tell us so we can fix it.</p>
<a id="report" href="mailto:[email protected]?subject=Broken%20link" style="display:inline-block;padding:10px 16px;border:1px solid #111827;border-radius:8px;color:#111827;text-decoration:none">Report this broken link</a>
<a href="/" style="margin-left:12px">Home</a>
</main>A road sign drawn with CSS only, so there is no image to load.
<main style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;text-align:center;padding:16px">
<div style="width:90px;height:90px;margin:0 auto;background:#facc15;transform:rotate(45deg);border-radius:10px;display:grid;place-items:center;border:4px solid #111"><span style="transform:rotate(-45deg);font-weight:900;font-size:22px">404</span></div>
<h1 style="font-size:22px;margin:24px 0 6px">Dead end</h1>
<p style="color:#4b5563">This road does not go anywhere. <a href="/">Turn around</a></p>
</main>For docs and big content sites, where search is the fastest way back.
<main style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;max-width:560px;margin:16px auto">
<h1 style="font-size:24px;margin:0 0 12px">Nothing at this address</h1>
<form action="/search" role="search" style="display:flex;gap:8px"><input name="q" aria-label="Search the docs" placeholder="Search the docs" style="flex:1;padding:12px;font-size:16px;border:2px solid #111827;border-radius:10px"><button style="padding:0 16px;border-radius:10px;border:0;background:#111827;color:#fff">Search</button></form>
<p style="color:#6b7280;font-size:14px">Popular: <a href="/docs/start">Getting started</a>, <a href="/docs/api">API</a>, <a href="/docs/faq">FAQ</a></p>
</main>For portfolios and personal sites where less is more.
<main style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;display:grid;place-items:center;height:150px">
<p style="font-size:18px;margin:0">404, nothing here. <a href="/" style="color:#111;text-decoration-thickness:2px">Back to the work</a></p>
</main>Gets hungry visitors straight to the menu, booking and phone number.
<main style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;text-align:center;padding:16px;background:#fff7ed;border-radius:14px">
<h1 style="font-size:24px;margin:0">This dish is off the menu</h1>
<p style="color:#7c2d12">The page you wanted is not here, but the kitchen is open.</p>
<p><a href="/menu">See the menu</a> · <a href="/book">Book a table</a> · <a href="tel:+15550100">Call us</a></p>
</main>For trades: the visitor probably has a job to book, so show the phone number.
<main style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;padding:16px;border:1px solid #e5e7eb;border-radius:14px">
<h1 style="font-size:22px;margin:0 0 6px">Sorry, that page has gone</h1>
<p style="color:#4b5563;margin:0 0 12px">Need a plumber today? We can still help.</p>
<a href="tel:+15550100" style="display:inline-block;padding:12px 18px;border-radius:10px;background:#16a34a;color:#fff;text-decoration:none;font-weight:600">Call 555 0100</a>
<a href="/services" style="margin-left:10px">All services</a>
</main>A colourful headline that suits playful brands.
<main style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;text-align:center;padding:24px">
<h1 style="font-size:72px;margin:0;font-weight:900;background:linear-gradient(90deg,#f97316,#ec4899,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent">Oops</h1>
<p style="font-size:18px">We looked everywhere. This page is not here.</p>
<a href="/">Take me home</a>
</main>For developer tools: a fake command line with real links.
<main style="font-family:ui-monospace,Menlo,monospace;background:#111827;color:#a7f3d0;padding:18px;border-radius:12px;font-size:14px">
<p style="margin:0">$ open /this/page</p>
<p style="margin:4px 0;color:#fca5a5">error: 404 not found</p>
<p style="margin:4px 0">$ suggest</p>
<p style="margin:4px 0">> <a href="/docs" style="color:#93c5fd">/docs</a> <a href="/changelog" style="color:#93c5fd">/changelog</a> <a href="/" style="color:#93c5fd">/</a></p>
</main>Points readers to the latest writing instead of an empty page.
<main style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;max-width:520px;margin:12px auto">
<h1 style="font-size:22px">This post has moved or never existed</h1>
<h2 style="font-size:15px;color:#6b7280;text-transform:uppercase;letter-spacing:.06em">Recent posts</h2>
<ul style="padding-left:18px;line-height:1.9"><li><a href="/blog/a">How we plan a launch</a></li><li><a href="/blog/b">Five lessons from our first year</a></li><li><a href="/blog/c">A simple pricing page checklist</a></li></ul>
</main>For software: signed-in users often hit 404s from old bookmarks, so offer the dashboard.
<main style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;text-align:center;padding:20px;background:#f8fafc;border-radius:14px">
<h1 style="font-size:22px;margin:0">We could not find that page</h1>
<p style="color:#475569">If you were looking for your account, start from the dashboard.</p>
<a href="/app" style="display:inline-block;padding:10px 18px;border-radius:10px;background:#4f46e5;color:#fff;text-decoration:none">Open dashboard</a>
<p style="font-size:14px"><a href="/help">Help centre</a> · <a href="/status">System status</a></p>
</main>Text over a full-bleed image with a dark overlay for contrast. Swap in your own picture URL.
<main style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;position:relative;min-height:200px;border-radius:14px;overflow:hidden;display:grid;place-items:center;text-align:center;color:#fff;background:#334155 linear-gradient(rgb(0 0 0/.45),rgb(0 0 0/.45))">
<div><h1 style="font-size:28px;margin:0">Off the map</h1><p>This page is somewhere we have not been.</p><a href="/" style="color:#fff;font-weight:600">Head back home</a></div>
</main>Suggests where most people go next but never redirects, so the status stays 404.
<main style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;text-align:center;padding:16px">
<h1 style="font-size:22px">Page not found</h1>
<p>Most people go to the <a href="/">homepage</a> or the <a href="/shop">shop</a> from here.</p>
</main>A centred card on a tinted background, good for clean modern sites.
<main style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;background:#eef2ff;padding:28px 16px;border-radius:14px">
<div style="max-width:360px;margin:auto;background:#fff;border-radius:16px;padding:22px;box-shadow:0 10px 30px rgb(0 0 0/.08);text-align:center">
<p style="margin:0;color:#6366f1;font-weight:700">404</p>
<h1 style="font-size:22px;margin:6px 0">Missing page</h1>
<p style="color:#4b5563">Check the address or start again from home.</p>
<a href="/" style="display:block;padding:10px;border-radius:10px;background:#6366f1;color:#fff;text-decoration:none">Home</a>
</div>
</main>For bilingual sites, the message in both languages with links to each home page.
<main style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px">
<div><h1 style="font-size:20px;margin:0" lang="en">Page not found</h1><p lang="en"><a href="/en/">English home</a></p></div>
<div><h2 style="font-size:20px;margin:0" lang="es">Página no encontrada</h2><p lang="es"><a href="/es/">Inicio en español</a></p></div>
</main>For pages that will not come back. Pair this with a 410 status.
<main style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;padding:16px;border-left:4px solid #f59e0b;background:#fffbeb">
<h1 style="font-size:22px;margin:0">This event has finished</h1>
<p style="color:#78350f">Thanks to everyone who came. The page has been retired.</p>
<a href="/events">See upcoming events</a>
</main>The design only helps if the server also says 404. Here is how on common setups.
Rendered for unknown URLs and whenever you call notFound(); Next.js sends a 404 status.
// app/not-found.tsx
import Link from "next/link";
export default function NotFound() {
return (
<main className="mx-auto max-w-md py-16 text-center">
<h1 className="text-2xl font-semibold">Page not found</h1>
<p className="mt-2 text-gray-600">The link may be old or mistyped.</p>
<Link href="/" className="mt-4 inline-block underline">Back to home</Link>
</main>
);
}
// In a page, for a record that does not exist:
// import { notFound } from "next/navigation";
// if (!post) notFound();Both serve a 404.html at the root of the published folder with a 404 status. A catch-all rewrite to index.html with status 200 breaks this.
public/
index.html
404.html <- served with status 404 for unknown paths
# Netlify _redirects: avoid this for sites with real pages,
# it makes every unknown URL answer 200:
# /* /index.html 200Add 404.html at the root of the publishing source. GitHub Pages serves it with a 404 status.
docs/ <- or your publishing branch root
index.html
404.htmlPoints missing URLs at your page while keeping the 404 status. Use a local path, not a full URL, or Apache redirects instead.
ErrorDocument 404 /404.htmlThe internal flag stops people loading /404.html directly with a 200.
error_page 404 /404.html;
location = /404.html {
internal;
}Add the handler after all other routes so only unmatched requests reach it.
app.use((req, res) => {
res.status(404).sendFile(path.join(__dirname, "public", "404.html"));
});Lead with what happened and what to do, in that order. Page not found, then a sentence such as: the link may be old or mistyped. Then the search box and links. Avoid blaming the visitor, and avoid technical words like server, request or error code in the headline.
Match your brand's voice, but keep it calm. Someone who arrived from an old link in an email is mildly annoyed; a cheerful pun can help, a long riddle does not.
Plain: This page is not here. It may have moved or the link may be mistyped. Try searching, or go back to the homepage.
Warm: Sorry, we could not find that page. Here are a few places people usually look for next.
Playful: This page took a wrong turn. Let us get you back on the road, starting with the search box below.
A page that says something like not found but returns a 200 OK status, or a thin page that search engines judge to be an error. Google reports these as soft 404s in Search Console and may drop them from results. The fix is to return a real 404 or 410 status for missing pages.
Both mean the page is not there, and Google says it handles 4xx errors in much the same way. 410 Gone states that the removal is permanent, which suits retired campaigns and deleted products. 404 is fine for most cases, especially when you are not sure.
Not by themselves. Missing pages are a normal part of the web, and Google says 404s for pages that should not exist do not harm the rest of your site. The harm comes from broken internal links, from losing links that pointed to a page you deleted, and from soft 404s.
Most single-page apps rewrite every URL to index.html so the router can run, which makes the server answer 200 for everything. Either prerender real pages and let unknown paths fall through to a 404.html, or have your server return a 404 status for paths your router does not know.
Related: Why is my website not showing on Google, Redirect checker, Website navigation examples, Sitemap checker, Website launch checklist.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.