Eclipse total de página
Lo que buscabas ha quedado detrás de la Luna. Volverá a verse, pero no aquí.
Volver al inicioHTML + CSS404
404 Eclipse total
Una página 404 donde el cero es la Luna tapando el Sol, con una corona que gira y un anillo de diamante.
Ajustes
1x
Código
<!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 · Página no encontrada</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">Eclipse total de página</h1>
<p class="n4-sub">Lo que buscabas ha quedado detrás de la Luna. Volverá a verse, pero no aquí.</p>
<a class="n4-cta" href="/">Volver al inicio</a>
</div>
</main>
</body>
</html>
Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en 404
Dónde usarlo
Quien cae en un enlace roto suele irse en pocos segundos. Una página 404 personalizada que merezca un vistazo te compra esos segundos, y el botón lo lleva a tu inicio en vez de a la competencia. Este eclipse le sienta bien a un estudio de fotografía, un despacho de arquitectura o una marca de estética oscura y serena.
Es una página completa en HTML y CSS: subes el 404.html a tu servidor y funciona. Cambia primero el dorado por el color de tu marca y luego reescribe el título con tu manera de hablar. Si tu web es clara y alegre, te irá mejor otro diseño.