error 404 not-found space astronaut playful playful
Error 404
Playful 404 page with floating astronaut CSS art, twinkling stars, and navigation buttons.
playful Responsive Animated
Live Preview
Sections
stars-backgroundastronauterror-textnavigation-buttons
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>404 — Page Not Found</title>
<meta name="description" content="The page you're looking for doesn't exist or has been moved." />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<style>
body { font-family: 'Inter', sans-serif; }
/* Brand tokens — dark space / indigo identity */
:root {
--color-primary: #4f46e5;
--color-primary-hover: #4338ca;
--color-primary-soft: #eef2ff;
--color-primary-text: #ffffff;
--color-surface: #0f172a;
--color-surface-alt: #1e293b;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
25% { transform: translateY(-15px) rotate(2deg); }
75% { transform: translateY(-5px) rotate(-2deg); }
}
@keyframes twinkle {
0%, 100% { opacity: 1; }
50% { opacity: 0.2; }
}
@keyframes drift {
0% { transform: translateX(0); }
50% { transform: translateX(10px); }
100% { transform: translateX(0); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px color-mix(in srgb, var(--color-primary) 30%, transparent); }
50% { box-shadow: 0 0 40px color-mix(in srgb, var(--color-primary) 60%, transparent); }
}
.astronaut { animation: float 8s ease-in-out infinite; }
.star { animation: twinkle 3s ease-in-out infinite; }
.star:nth-child(2) { animation-delay: 0.7s; animation-duration: 2.5s; }
.star:nth-child(3) { animation-delay: 1.4s; animation-duration: 4s; }
.star:nth-child(4) { animation-delay: 0.3s; animation-duration: 2s; }
.star:nth-child(5) { animation-delay: 2s; animation-duration: 3.5s; }
.star:nth-child(6) { animation-delay: 0.5s; animation-duration: 2.8s; }
.star:nth-child(7) { animation-delay: 1.2s; animation-duration: 3.2s; }
.star:nth-child(8) { animation-delay: 0.8s; animation-duration: 2.3s; }
.tether { animation: drift 6s ease-in-out infinite; }
.glow { animation: pulse-glow 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.astronaut, .star, .tether, .glow { animation: none; }
}
</style>
</head>
<body class="min-h-screen bg-slate-900 text-white antialiased overflow-hidden">
<!-- Navigation -->
<nav class="ws-navbar absolute top-0 left-0 right-0 z-50 p-6" aria-label="Main navigation">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<a href="/" class="flex items-center gap-2 text-lg font-bold text-white" aria-label="Home">
<svg class="w-8 h-8" viewBox="0 0 32 32" fill="none" aria-hidden="true">
<rect width="32" height="32" rx="8" fill="#4F46E5" />
<path d="M10 11h12M10 16h8M10 21h10" stroke="white" stroke-width="2" stroke-linecap="round" />
</svg>
Acme
</a>
<a href="/" class="text-sm font-medium text-slate-400 hover:text-white transition-colors">Back to Home</a>
</div>
</nav>
<div class="ws-error min-h-screen flex flex-col items-center justify-center p-6 relative">
<!-- Stars Background -->
<div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
<div class="star absolute w-1 h-1 bg-white rounded-full" style="top: 8%; left: 15%;"></div>
<div class="star absolute w-1.5 h-1.5 bg-white rounded-full" style="top: 20%; left: 78%;"></div>
<div class="star absolute w-1 h-1 bg-white rounded-full" style="top: 55%; left: 12%;"></div>
<div class="star absolute w-1.5 h-1.5 bg-white rounded-full" style="top: 42%; left: 88%;"></div>
<div class="star absolute w-1 h-1 bg-white rounded-full" style="top: 78%; left: 52%;"></div>
<div class="star absolute w-0.5 h-0.5 bg-white rounded-full" style="top: 12%; left: 42%;"></div>
<div class="star absolute w-0.5 h-0.5 bg-white rounded-full" style="top: 65%; left: 28%;"></div>
<div class="star absolute w-1 h-1 bg-white rounded-full" style="top: 30%; left: 62%;"></div>
<div class="star absolute w-0.5 h-0.5 bg-white rounded-full" style="top: 50%; left: 92%;"></div>
<div class="star absolute w-1 h-1 bg-white rounded-full" style="top: 88%; left: 72%;"></div>
<div class="star absolute w-0.5 h-0.5 bg-indigo-300 rounded-full" style="top: 25%; left: 35%;"></div>
<div class="star absolute w-1 h-1 bg-purple-300 rounded-full" style="top: 70%; left: 85%;"></div>
<div class="star absolute w-0.5 h-0.5 bg-indigo-200 rounded-full" style="top: 40%; left: 5%;"></div>
<div class="star absolute w-1 h-1 bg-white rounded-full" style="top: 15%; left: 55%;"></div>
<div class="star absolute w-0.5 h-0.5 bg-white rounded-full" style="top: 60%; left: 40%;"></div>
</div>
<!-- Astronaut CSS Art -->
<div class="astronaut relative mb-4" aria-hidden="true">
<div class="relative w-48 h-56">
<!-- Tether Line -->
<div class="tether absolute top-32 -right-12 w-24 border-t border-dashed border-slate-600 rotate-[20deg] origin-left"></div>
<div class="absolute top-[140px] -right-[85px] w-3 h-3 rounded-full bg-slate-600"></div>
<!-- Helmet -->
<div class="absolute top-2 left-1/2 -translate-x-1/2 w-28 h-28 rounded-full bg-gradient-to-b from-slate-100 to-slate-300 border-4 border-slate-400 overflow-hidden shadow-lg">
<!-- Visor -->
<div class="glow absolute inset-3 rounded-full bg-gradient-to-br from-indigo-800 via-slate-800 to-purple-900">
<!-- Visor Reflection -->
<div class="absolute top-4 left-4 w-5 h-5 rounded-full bg-white/20"></div>
<div class="absolute top-8 left-8 w-2 h-2 rounded-full bg-white/10"></div>
</div>
</div>
<!-- Body -->
<div class="absolute top-[105px] left-1/2 -translate-x-1/2 w-24 h-24 rounded-2xl bg-gradient-to-b from-slate-200 to-slate-300 border-4 border-slate-400 shadow-md">
<!-- Chest Light -->
<div class="absolute top-2 left-1/2 -translate-x-1/2 w-10 h-4 rounded-full shadow-lg" style="background-color: var(--color-primary); box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 50%, transparent);"></div>
<!-- Control Panel -->
<div class="absolute top-9 left-1/2 -translate-x-1/2 w-8 h-8 rounded-lg bg-slate-400 border border-slate-500">
<div class="grid grid-cols-2 gap-1 p-1">
<div class="w-2.5 h-2.5 rounded-sm bg-red-400"></div>
<div class="w-2.5 h-2.5 rounded-sm bg-emerald-400"></div>
<div class="w-2.5 h-2.5 rounded-sm bg-amber-400"></div>
<div class="w-2.5 h-2.5 rounded-sm bg-blue-400"></div>
</div>
</div>
</div>
<!-- Left Arm -->
<div class="absolute top-[115px] left-2 w-6 h-16 rounded-full bg-gradient-to-b from-slate-200 to-slate-300 border-2 border-slate-400 rotate-[25deg] origin-top">
<div class="absolute -bottom-1 left-0 w-6 h-5 rounded-full bg-slate-200 border-2 border-slate-400"></div>
</div>
<!-- Right Arm (waving) -->
<div class="absolute top-[112px] right-1 w-6 h-16 rounded-full bg-gradient-to-b from-slate-200 to-slate-300 border-2 border-slate-400 -rotate-[50deg] origin-top">
<div class="absolute -bottom-1 left-0 w-6 h-5 rounded-full bg-slate-200 border-2 border-slate-400"></div>
</div>
<!-- Left Leg -->
<div class="absolute bottom-0 left-[52px] w-6 h-16 rounded-full bg-gradient-to-b from-slate-200 to-slate-300 border-2 border-slate-400 -rotate-[15deg] origin-top">
<div class="absolute -bottom-2 -left-1 w-8 h-5 rounded-lg bg-slate-300 border-2 border-slate-400"></div>
</div>
<!-- Right Leg -->
<div class="absolute bottom-0 right-[52px] w-6 h-16 rounded-full bg-gradient-to-b from-slate-200 to-slate-300 border-2 border-slate-400 rotate-[15deg] origin-top">
<div class="absolute -bottom-2 -left-1 w-8 h-5 rounded-lg bg-slate-300 border-2 border-slate-400"></div>
</div>
<!-- Backpack -->
<div class="absolute top-[110px] left-1/2 -translate-x-1/2 -z-10 w-28 h-20 rounded-xl bg-slate-400 border-2 border-slate-500"></div>
</div>
</div>
<!-- 404 Text -->
<h1 class="text-[7rem] sm:text-[10rem] lg:text-[12rem] font-extrabold leading-none tracking-tighter bg-gradient-to-b from-white via-slate-300 to-slate-600 bg-clip-text text-transparent select-none">
404
</h1>
<!-- Content -->
<div class="text-center max-w-lg mt-2 relative z-10">
<h2 class="text-2xl sm:text-3xl font-bold text-white mb-3">Lost in space</h2>
<p class="text-slate-400 leading-relaxed mb-8">
Houston, we have a problem. The page you're looking for has drifted off into the void. It might have been moved, deleted, or maybe it never existed in this galaxy.
</p>
<!-- Action Buttons -->
<div class="flex flex-col sm:flex-row items-center justify-center gap-3 mb-8">
<a href="/"
class="inline-flex items-center gap-2 px-7 py-3.5 rounded-xl text-white font-semibold transition shadow-lg"
style="background-color: var(--color-primary); box-shadow: 0 10px 25px color-mix(in srgb, var(--color-primary) 25%, transparent);"
onmouseover="this.style.backgroundColor='var(--color-primary-hover)'" onmouseout="this.style.backgroundColor='var(--color-primary)'">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
Go Home
</a>
<a href="#"
class="inline-flex items-center gap-2 px-7 py-3.5 rounded-xl border border-slate-600 text-slate-300 font-semibold hover:bg-slate-800 hover:border-slate-500 transition">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
Search
</a>
</div>
<!-- Helpful Links -->
<div class="bg-white/5 rounded-2xl border border-white/10 p-6 text-left mb-8">
<h3 class="text-sm font-semibold text-slate-300 mb-4">Popular destinations</h3>
<div class="grid grid-cols-2 gap-3">
<a href="#" class="flex items-center gap-2 p-3 rounded-xl hover:bg-white/5 transition group">
<svg class="w-5 h-5 text-slate-500 transition group-hover:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" style="--hover-color: var(--color-primary);">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
<span class="text-sm text-slate-400 group-hover:text-white transition">Homepage</span>
</a>
<a href="#" class="flex items-center gap-2 p-3 rounded-xl hover:bg-white/5 transition group">
<svg class="w-5 h-5 text-slate-500 transition group-hover:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
</svg>
<span class="text-sm text-slate-400 group-hover:text-white transition">Documentation</span>
</a>
<a href="#" class="flex items-center gap-2 p-3 rounded-xl hover:bg-white/5 transition group">
<svg class="w-5 h-5 text-slate-500 transition group-hover:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
</svg>
<span class="text-sm text-slate-400 group-hover:text-white transition">Dashboard</span>
</a>
<a href="#" class="flex items-center gap-2 p-3 rounded-xl hover:bg-white/5 transition group">
<svg class="w-5 h-5 text-slate-500 transition group-hover:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
</svg>
<span class="text-sm text-slate-400 group-hover:text-white transition">Help Center</span>
</a>
</div>
</div>
<!-- Support -->
<p class="text-sm text-slate-600">
Think this is a bug?
<a href="mailto:support@acme.com" class="font-medium transition-colors" style="color: color-mix(in srgb, var(--color-primary) 80%, #c7d2fe);" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">Let us know</a>
</p>
</div>
<!-- Planet Surface -->
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-[200%] h-48 rounded-[50%] bg-gradient-to-t from-slate-800 to-slate-900 border-t border-slate-700/50" aria-hidden="true">
<!-- Craters -->
<div class="absolute top-8 left-[30%] w-12 h-6 rounded-full bg-slate-800/50 border border-slate-700/30"></div>
<div class="absolute top-12 left-[60%] w-8 h-4 rounded-full bg-slate-800/50 border border-slate-700/30"></div>
<div class="absolute top-6 left-[75%] w-6 h-3 rounded-full bg-slate-800/50 border border-slate-700/30"></div>
</div>
</div>
</body>
</html>
Fun, space-themed 404 error page featuring a floating astronaut built with pure CSS, twinkling star animations, large gradient “404” heading, and Go Home / Search action buttons. Animations respect prefers-reduced-motion.