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
Ver todos: 404Dó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.