This page crossed the event horizon.
Nothing comes back from there, not even light. You, on the other hand, can go back home.
Escape to homeHTML + CSS404
Black hole 404
A black hole with a spinning accretion disk and a glowing photon ring, in the spirit of Interstellar.
Settings
1x
Code
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>404 · Page not found</title>
<style>
body { margin: 0; background: #000; }
.n4-blackhole {
--accent: #ff9f0a;
--k: 1;
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
container-type: size;
display: grid;
place-items: center;
background: #000;
color: #f5f5f7;
font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;
-webkit-font-smoothing: antialiased;
text-align: center;
line-height: 1.4;
}
.n4-blackhole *,.n4-blackhole *::before,.n4-blackhole *::after {
box-sizing: border-box;
}
.n4-blackhole .n4-copy {
position: relative;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6cqmin;
width: 100%;
max-width: 680px;
padding: 0 6cqw;
}
.n4-blackhole .n4-title {
margin: 0;
font-size: clamp(17px,4.2cqmin,36px);
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.15;
text-wrap: balance;
}
.n4-blackhole .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-blackhole .n4-tag {
font: 600 clamp(10px,1.9cqmin,13px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent);
}
.n4-blackhole .n4-cta {
margin-top: 1.8cqmin;
display: inline-flex;
align-items: center;
gap: .5em;
padding: .85em 1.5em;
border-radius: 999px;
background: #f5f5f7;
color: #000;
font-size: clamp(13px,2.2cqmin,16px);
font-weight: 600;
text-decoration: none;
transition: transform .3s cubic-bezier(.25,.1,.25,1),box-shadow .3s cubic-bezier(.25,.1,.25,1);
}
.n4-blackhole .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-blackhole .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-blackhole .n4-stars,.n4-blackhole .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-blackhole .n4-stars {
background-image: radial-gradient(1px 1px at 8% 12%,#fff 60%,transparent),radial-gradient(1px 1px at 22% 68%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 35% 24%,#fff 60%,transparent),radial-gradient(1px 1px at 48% 82%,#fff 60%,transparent),radial-gradient(1px 1px at 57% 9%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 66% 44%,#fff 60%,transparent),radial-gradient(1px 1px at 74% 72%,#fff 60%,transparent),radial-gradient(1px 1px at 86% 18%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 93% 58%,#fff 60%,transparent),radial-gradient(1px 1px at 14% 42%,#fff 60%,transparent),radial-gradient(1px 1px at 40% 55%,#fff 60%,transparent),radial-gradient(1px 1px at 81% 90%,#fff 60%,transparent),radial-gradient(1px 1px at 4% 88%,#fff 60%,transparent),radial-gradient(1px 1px at 62% 30%,#fff 60%,transparent);
opacity: .75;
animation: n4-blackhole-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-blackhole .n4-stars2 {
background-image: radial-gradient(2px 2px at 18% 30%,rgba(255,255,255,.9) 50%,transparent),radial-gradient(1.5px 1.5px at 72% 20%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 30% 85%,rgba(255,255,255,.7) 50%,transparent),radial-gradient(1.5px 1.5px at 88% 70%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 52% 60%,rgba(255,255,255,.6) 50%,transparent),radial-gradient(1.5px 1.5px at 6% 55%,rgba(255,255,255,.8) 50%,transparent);
opacity: .55;
animation: n4-blackhole-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-blackhole [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-blackhole-tw {
from {
opacity: .3;
}
}
@keyframes n4-blackhole-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-blackhole-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-blackhole *,.n4-blackhole *::before,.n4-blackhole *::after {
animation: none!important;
transition: none!important;
}
}
.n4-blackhole {
background: radial-gradient(70% 55% at 50% 34%,#140a02,#000 70%);
}
.n4-blackhole .n4-sys {
position: relative;
width: min(80cqmin,560px);
height: min(40cqmin,280px);
margin-bottom: 1cqmin;
}
.n4-blackhole .n4-sys>span {
position: absolute;
left: 50%;
top: 50%;
}
.n4-blackhole .n4-hole {
z-index: 2;
width: 28%;
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
background: #000;
box-shadow: 0 0 0 .3cqmin color-mix(in srgb,var(--accent) 50%,#fff),0 0 3cqmin 1cqmin color-mix(in srgb,var(--accent) 45%,transparent);
animation: n4-blackhole-breathe calc(6s / var(--k)) ease-in-out infinite;
}
.n4-blackhole .n4-lens {
z-index: 1;
width: 42%;
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
background: conic-gradient(from 90deg,#fff3d6,var(--accent),#7a2a00,var(--accent),#ffe2a8,#b54700,#fff3d6);
-webkit-mask: radial-gradient(circle,transparent 58%,#000 62%,transparent 71%);
mask: radial-gradient(circle,transparent 58%,#000 62%,transparent 71%);
filter: blur(.5cqmin);
opacity: .9;
animation: n4-blackhole-spin calc(20s / var(--k)) linear infinite reverse;
}
.n4-blackhole .n4-disk {
width: 100%;
aspect-ratio: 1;
translate: -50% -50%;
transform: scaleY(.2);
}
.n4-blackhole .n4-disk i {
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(from 0deg,#fff3d6,var(--accent),#7a2a00,color-mix(in srgb,var(--accent) 70%,#fff),#ffe2a8,#b54700,#fff3d6);
-webkit-mask: radial-gradient(circle,transparent 22%,#000 26%,#000 52%,transparent 70%);
mask: radial-gradient(circle,transparent 22%,#000 26%,#000 52%,transparent 70%);
filter: blur(.6cqmin);
animation: n4-blackhole-spin calc(8s / var(--k)) linear infinite;
}
.n4-blackhole .n4-back {
z-index: 0;
}
.n4-blackhole .n4-front {
z-index: 3;
-webkit-mask: linear-gradient(transparent 47%,#000 53%);
mask: linear-gradient(transparent 47%,#000 53%);
}
.n4-blackhole .n4-num {
font-size: clamp(28px,8cqmin,64px);
font-weight: 200;
letter-spacing: .35em;
margin-right: -.35em;
color: color-mix(in srgb,var(--accent) 45%,#fff);
}
@keyframes n4-blackhole-breathe {
50% {
box-shadow: 0 0 0 .35cqmin color-mix(in srgb,var(--accent) 60%,#fff),0 0 5cqmin 1.5cqmin color-mix(in srgb,var(--accent) 55%,transparent);
}
}
</style>
</head>
<body>
<main class="n4-blackhole">
<div class="n4-stars" aria-hidden="true"></div>
<div class="n4-copy">
<div class="n4-sys" aria-hidden="true">
<span class="n4-lens"></span>
<span class="n4-disk n4-back"><i></i></span>
<span class="n4-hole"></span>
<span class="n4-disk n4-front"><i></i></span>
</div>
<span class="n4-num" aria-hidden="true">404</span>
<h1 class="n4-title">This page crossed the event horizon.</h1>
<p class="n4-sub">Nothing comes back from there, not even light. You, on the other hand, can go back home.</p>
<a class="n4-cta" href="/">Escape to home</a>
</div>
</main>
</body>
</html>
Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in 404
Where to use it
A broken link is a dead end, and this page leans into it with some drama: the page has “crossed the event horizon”. A 404 like this gives people a reason to take a screenshot instead of bouncing. It suits a game studio, a film production company or a music label with a dark, cinematic look.
Orange works well against the black, but try a cold blue or violet if your brand is less warm. Make sure your server really returns a 404 status with this page, so search engines drop the missing URL instead of indexing it.