Diese Seite hat den Ereignishorizont überschritten.
Von dort kommt nichts zurück, nicht einmal Licht. Du aber schon, zurück zur Startseite.
Zur Startseite fliehenHTML + CSS404
Schwarzes-Loch-404
Ein Schwarzes Loch mit rotierender Akkretionsscheibe und leuchtendem Photonenring, ganz im Stil von Interstellar.
Einstellungen
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 · Seite nicht gefunden</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">Diese Seite hat den Ereignishorizont überschritten.</h1>
<p class="n4-sub">Von dort kommt nichts zurück, nicht einmal Licht. Du aber schon, zurück zur Startseite.</p>
<a class="n4-cta" href="/">Zur Startseite fliehen</a>
</div>
</main>
</body>
</html>
Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus 404
Wofür du ihn nutzen kannst
Ein kaputter Link ist eine Sackgasse, und diese Seite nimmt das mit etwas Drama: Sie hat „den Ereignishorizont überschritten“. So eine 404 lädt eher zum Screenshot ein als zum Absprung. Passt zu einem Game-Studio, einer Filmproduktion oder einem Musiklabel mit dunklem, filmischem Auftritt, das eine besondere 404-Seite sucht.
Orange wirkt stark auf Schwarz, aber probier ruhig ein kühles Blau oder Violett, wenn deine Marke weniger warm ist. Achte darauf, dass dein Server mit dieser Seite wirklich den Statuscode 404 liefert, damit Google die fehlende URL nicht indexiert.