Animated 404 Page

A playful full-page 404 error template in pure CSS, where the zero of "404" is a ringed planet floating in a pastel sky. It includes a short message, a site search field and a link back to the home page, so visitors who hit a broken link have a clear way forward. No JavaScript and no images are needed.

How it works

The root main.nf-page fills the viewport with min-height: 100vh and centers .nf-content with display: grid and place-items: center. Behind it, .nf-sky holds six .nf-star sparkles drawn with clip-path that twinkle at different delays. The large .nf-code line contains two .nf-digit elements and an .nf-planet with an inline SVG: an .nf-ring-back ellipse, the .nf-globe with .nf-crater circles and an .nf-ring-front arc drawn on top, which makes the ring appear to wrap around the planet. The SVG floats and tilts with the nf-float keyframes, the digits bob gently out of phase, and .nf-shadow below the planet shrinks as it rises.

The .nf-title heading, .nf-text paragraph, the form.nf-search and the .nf-home link follow. The form is a normal GET request to /search with the field name q, so it works with most site search setups without any script. The heading size and the big digits scale with clamp(), so the layout fits from small phones to wide screens.

Customization

• --nf-bg-top and --nf-bg-bottom on .nf-page: the two colors of the background gradient.
• --nf-planet and --nf-planet-dark: the planet body and crater colors; --nf-ring recolors the ring and the shadow.
• --nf-accent and --nf-accent-hover: the search button, the stars and the focus outlines.
• --nf-float-distance: how far the planet rises, e.g. 30px for a bigger float.
• --nf-float-speed: duration of one float cycle; lower values feel livelier.
• action="/search" and name="q" on .nf-search: point them to your own search URL and query parameter.
• href="/" on .nf-home: the home page or any other safe landing page.

Accessibility

The decorative "404" and the sky are aria-hidden, and the h1 includes visually hidden "Error 404:" text in an .nf-sr span, so screen reader users hear the full error. The form has role="search", a real label for the input and a visually hidden "Search" name on the icon button. The search pill, button and home link show a clear violet focus outline. Text colors are dark indigo on a light background for strong contrast. With prefers-reduced-motion: reduce all floating and twinkling animations are switched off.

Usage notes

This is a full-page template, so style.css resets the body margin. Make sure your server also returns the HTTP status 404 for this page, not 200, so search engines do not index it.