Pages Easy
404 Not Found Page
An animated 404 error page with a glitch text effect, floating illustration, and navigation links back to safety. Zero dependencies.
Open in Lab
MCP
css vanilla-js
Targets: JS HTML
Code
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #f8fafc;
min-height: 100vh;
color: #111;
}
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 40px;
max-width: 1100px;
margin: 0 auto;
width: 100%;
}
.logo {
font-size: 20px;
font-weight: 800;
color: #111;
text-decoration: none;
}
.nav-home {
font-size: 14px;
color: #6366f1;
text-decoration: none;
font-weight: 600;
}
.content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 24px 80px;
text-align: center;
gap: 20px;
}
/* Glitch effect */
.glitch-wrap {
height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
.glitch {
font-size: clamp(80px, 18vw, 120px);
font-weight: 900;
color: #111;
position: relative;
letter-spacing: -4px;
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.glitch::before {
color: #6366f1;
animation: glitch-1 2.5s infinite;
clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}
.glitch::after {
color: #ef4444;
animation: glitch-2 2.5s infinite;
clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}
@keyframes glitch-1 {
0%,
90%,
100% {
transform: translate(0);
opacity: 0;
}
92% {
transform: translate(-3px, 2px);
opacity: 0.8;
}
94% {
transform: translate(3px, -2px);
opacity: 0.8;
}
96% {
transform: translate(0);
opacity: 0;
}
}
@keyframes glitch-2 {
0%,
90%,
100% {
transform: translate(0);
opacity: 0;
}
93% {
transform: translate(3px, 1px);
opacity: 0.8;
}
95% {
transform: translate(-3px, -1px);
opacity: 0.8;
}
97% {
transform: translate(0);
opacity: 0;
}
}
/* Illustration */
.illustration {
animation: float 4s ease-in-out infinite;
}
.illustration svg {
width: 200px;
height: auto;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-12px);
}
}
h1 {
font-size: clamp(22px, 4vw, 30px);
font-weight: 700;
color: #111;
}
p {
font-size: 16px;
color: #666;
max-width: 420px;
line-height: 1.6;
}
/* Search */
.search-box {
display: flex;
align-items: center;
gap: 0;
background: #fff;
border: 1.5px solid #e5e7eb;
border-radius: 12px;
padding: 4px 4px 4px 16px;
width: 100%;
max-width: 400px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.search-box svg {
width: 16px;
height: 16px;
color: #9ca3af;
flex-shrink: 0;
}
.search-box input {
flex: 1;
border: none;
outline: none;
padding: 8px 12px;
font-size: 14px;
background: none;
color: #111;
}
.search-box button {
padding: 9px 18px;
background: #6366f1;
color: #fff;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: opacity 0.15s;
}
.search-box button:active {
opacity: 0.85;
}
/* Quick links */
.quick-links {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
font-size: 14px;
}
.quick-links span {
color: #999;
}
.quick-links a {
color: #6366f1;
text-decoration: none;
font-weight: 500;
padding: 4px 12px;
background: #eef2ff;
border-radius: 20px;
transition: background 0.15s;
}
.quick-links a:hover {
background: #e0e7ff;
}const form = document.querySelector(".search-box");
if (form) {
const btn = form.querySelector("button");
const input = form.querySelector("input");
btn.addEventListener("click", () => {
if (input.value.trim()) {
// In a real app: window.location = `/search?q=${encodeURIComponent(input.value)}`
input.value = "";
input.focus();
}
});
input.addEventListener("keydown", (e) => {
if (e.key === "Enter") btn.click();
});
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>404 — Page Not Found</title>
</head>
<body>
<div class="page">
<nav class="nav">
<a href="#" class="logo">Brand</a>
<a href="#" class="nav-home">Go to homepage</a>
</nav>
<main class="content">
<div class="glitch-wrap" aria-hidden="true">
<span class="glitch" data-text="404">404</span>
</div>
<div class="illustration">
<svg viewBox="0 0 200 140" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="120" rx="80" ry="10" fill="#e5e7eb"/>
<rect x="60" y="30" width="80" height="70" rx="6" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2"/>
<rect x="70" y="42" width="60" height="6" rx="3" fill="#d1d5db"/>
<rect x="70" y="54" width="40" height="6" rx="3" fill="#e5e7eb"/>
<rect x="70" y="66" width="50" height="6" rx="3" fill="#e5e7eb"/>
<circle cx="155" cy="40" r="22" fill="#fef2f2" stroke="#fca5a5" stroke-width="2"/>
<text x="149" y="47" font-size="22" fill="#ef4444">✕</text>
<circle cx="100" cy="100" r="12" fill="#fff" stroke="#d1d5db" stroke-width="2"/>
<text x="95" y="105" font-size="12" fill="#9ca3af">?</text>
</svg>
</div>
<h1>Page not found</h1>
<p>The page you're looking for doesn't exist or has been moved. Let's get you back on track.</p>
<div class="search-box">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input type="text" placeholder="Search for something…" />
<button>Search</button>
</div>
<div class="quick-links">
<span>Or try:</span>
<a href="#">Home</a>
<a href="#">Blog</a>
<a href="#">Docs</a>
<a href="#">Support</a>
</div>
</main>
</div>
<script src="script.js"></script>
</body>
</html>404 Not Found Page
A polished 404 page with a CSS glitch animation on the large “404” heading, a floating SVG illustration, and helpful navigation options to redirect users.
Features
- CSS glitch effect on the “404” text using
::before/::afterpseudo-elements - Floating animation on the illustration with
@keyframes - Search bar for users to find what they were looking for
- Quick links to popular sections
When to use it
- Any web app as the catch-all error route
- SPA apps with a wildcard route handler