Totale Seitenfinsternis
Was du gesucht hast, ist hinter dem Mond verschwunden. Es taucht wieder auf, nur nicht hier.
Zur StartseiteHTML + CSS404
Sonnenfinsternis-404
Eine 404-Seite, auf der die Null der Mond vor der Sonne ist, mit drehender Korona und aufblitzendem Diamantring.
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-eclipse {
--accent: #f5c77e;
--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-eclipse *,.n4-eclipse *::before,.n4-eclipse *::after {
box-sizing: border-box;
}
.n4-eclipse .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-eclipse .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-eclipse .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-eclipse .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-eclipse .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-eclipse .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-eclipse .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-eclipse .n4-stars,.n4-eclipse .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-eclipse .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-eclipse-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-eclipse .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-eclipse-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-eclipse [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-eclipse-tw {
from {
opacity: .3;
}
}
@keyframes n4-eclipse-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-eclipse-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-eclipse *,.n4-eclipse *::before,.n4-eclipse *::after {
animation: none!important;
transition: none!important;
}
}
.n4-eclipse {
background: radial-gradient(90% 70% at 50% 42%,#0d0c14,#000 70%);
}
.n4-eclipse .n4-num {
margin: 0 0 1cqmin;
display: flex;
align-items: center;
font-size: clamp(84px,30cqmin,300px);
font-weight: 700;
letter-spacing: -.05em;
line-height: .9;
}
.n4-eclipse .n4-num b {
background: linear-gradient(180deg,#fff 15%,#57575c 95%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: n4-eclipse-rise calc(1.4s / var(--k)) cubic-bezier(.2,.7,.2,1) both;
}
.n4-eclipse .n4-num b:last-child {
animation-delay: calc(.15s / var(--k));
}
.n4-eclipse .n4-moon {
position: relative;
width: .7em;
height: .7em;
margin: 0 .06em;
border-radius: 50%;
background: radial-gradient(circle at 42% 38%,#121214,#000 60%);
box-shadow: 0 0 0 .006em rgba(255,255,255,.95),0 0 .04em .012em #fff,0 0 .14em .03em color-mix(in srgb,var(--accent) 80%,#fff),0 0 .5em .12em color-mix(in srgb,var(--accent) 40%,transparent),0 0 1.1em .35em color-mix(in srgb,var(--accent) 16%,transparent);
animation: n4-eclipse-glow calc(6s / var(--k)) ease-in-out infinite;
}
.n4-eclipse .n4-moon::before {
content: "";
position: absolute;
inset: -.22em;
border-radius: 50%;
background: conic-gradient(from 20deg,transparent 0 6%,color-mix(in srgb,var(--accent) 55%,#fff) 10%,transparent 18% 40%,rgba(255,255,255,.55) 47%,transparent 55% 72%,color-mix(in srgb,var(--accent) 45%,#fff) 80%,transparent 88%);
-webkit-mask: radial-gradient(circle,transparent 54%,#000 57%,transparent 76%);
mask: radial-gradient(circle,transparent 54%,#000 57%,transparent 76%);
filter: blur(.018em);
opacity: .9;
animation: n4-eclipse-spin calc(18s / var(--k)) linear infinite;
}
.n4-eclipse .n4-moon::after {
content: "";
position: absolute;
top: 9%;
right: 11%;
width: .05em;
height: .05em;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 .05em .03em #fff,0 0 .22em .06em color-mix(in srgb,var(--accent) 70%,#fff);
animation: n4-eclipse-diamond calc(5s / var(--k)) ease-in-out infinite;
}
.n4-eclipse .n4-title,.n4-eclipse .n4-sub,.n4-eclipse .n4-cta {
animation: n4-eclipse-fade calc(1s / var(--k)) calc(.5s / var(--k)) cubic-bezier(.2,.7,.2,1) both;
}
@keyframes n4-eclipse-rise {
from {
opacity: 0;
transform: translateY(.12em);
filter: blur(.04em);
}
}
@keyframes n4-eclipse-glow {
50% {
filter: brightness(1.25);
}
}
@keyframes n4-eclipse-diamond {
0%,100% {
opacity: .2;
transform: scale(.5);
}
45%,55% {
opacity: 1;
transform: scale(1.6);
}
}
</style>
</head>
<body>
<main class="n4-eclipse">
<div class="n4-stars" aria-hidden="true"></div>
<div class="n4-copy">
<p class="n4-num" aria-hidden="true"><b>4</b><span class="n4-moon"></span><b>4</b></p>
<h1 class="n4-title">Totale Seitenfinsternis</h1>
<p class="n4-sub">Was du gesucht hast, ist hinter dem Mond verschwunden. Es taucht wieder auf, nur nicht hier.</p>
<a class="n4-cta" href="/">Zur Startseite</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
Wer auf einem kaputten Link landet, ist meist nach wenigen Sekunden wieder weg. Eine eigene 404-Seite, auf der es etwas zu sehen gibt, verschafft dir genau diese Sekunden, und der Button führt zurück zu deiner Startseite statt zur Konkurrenz. Die Finsternis passt zu einem Fotostudio, einem Architekturbüro oder einer Marke, die es dunkel und ruhig mag.
Es ist eine komplette Seite in HTML und CSS: Lade die 404.html auf deinen Server, fertig. Stell zuerst das Gold auf deine Markenfarbe um und schreib dann den Titel in deinem eigenen Ton. Ist deine Website hell und verspielt, passt ein anderes Design besser.