Craft Beautiful 404 Pages with AI
Describe what you want, and we'll generate custom 404 pages for your website. Get both HTML/CSS and Next.js component versions instantly.
Your 404 Pages
404 Page • 4 minutes ago
"use client";
import Image from 'next/image';
export default function Custom404() {
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-sky-100 to-blue-100">
<div className="text-center p-10 bg-white rounded-lg shadow-lg">
<Image src="/may-month-illustration.svg" alt="May Month Illustration" width={200} height={200} className="mb-4"/> {/* Placeholder for illustration */}
<h1 className="text-5xl font-bold text-blue-500 mb-4">404</h1>
<p className="text-lg text-gray-600 mb-6">Oops! The page you're looking for doesn't exist.</p>
<button className="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-700">
Go Home
</button>
</div>
</div>
);
}may month data
404 Page • 10 minutes ago
// use client directive is needed because of the use of animation
"use client"
import Image from 'next/image'
import Link from 'next/link'
export default function Custom404() {
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-[#28343b] to-[#191e23] text-white">
<div className="p-8 rounded-lg bg-white/10 shadow-lg">
{/* Image: Replace with actual image. Consider a celebratory New Year's image/illustration here */}
<Image src="/newyear.svg" width={200} height={200} alt="404 illustration" className="mb-4" />
<h1 className="text-4xl font-bold mb-4">Oops! Page Not Found</h1>
<p className="text-lg mb-8">It seems like you've stumbled upon a page that's gone missing. Happy New Year!</p>
<Link href="/" className="inline-block px-6 py-3 bg-blue-500 text-white font-medium rounded-md hover:bg-blue-700 transition duration-300">
Go back to Home
</Link>
</div>
</div>
)
}new year
404 Page • 44 minutes ago
"use client";
import Link from 'next/link';
export default function Custom404() {
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-emerald-200 to-teal-100">
<div className="bg-white p-10 rounded-lg shadow-lg w-96">
{/* Image of a friendly frog here. Replace with <img src="/frog.png" alt="Frog"/> */}
<h1 className="text-4xl font-bold text-emerald-600 mb-4">404 - Page Not Found!</h1>
<p className="text-lg text-gray-700 mb-8">Oops! Looks like you've hopped onto a page that doesn't exist. Ribbit!</p>
<Link href="/" className="bg-emerald-500 hover:bg-emerald-700 text-white font-bold py-2 px-4 rounded">Go back home</Link>
</div>
</div>
)
}new frog theme
404 Page • about 1 hour ago
'use client';
import Image from 'next/image';
import Link from 'next/link';
export default function Custom404() {
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-[#66ccff] to-[#3399cc]">
<Image
src="/forest-background.jpg" // Replace with actual image path
alt="Forest Background"
width={1920}
height={1080}
className="absolute inset-0 object-cover opacity-20 z-[-1]"
/>
<div className="bg-white/10 p-10 rounded-lg shadow-lg w-full max-w-md text-white">
<div className="animate-bounce mb-4"> {/*simple animation*/}
<Image
src="/bird.png" // Replace with actual image path
alt="Bird"
width={100}
height={100}
/>
</div>
<h1 className="text-4xl font-bold mb-4">Oops! Page Not Found</h1>
<p className="text-lg mb-8">Looks like you've taken a wrong turn in the forest. Don't worry, we'll guide you back.</p>
<Link href="/" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Return Home</Link>
</div>
</div>
);
}forest and bird themed
404 Page • about 1 hour ago
"use client";
import Image from 'next/image';
export default function Custom404() {
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-yellow-400 to-orange-500 text-white">
<div className="p-10 bg-white/10 rounded-lg shadow-lg">
<h1 className="text-4xl font-bold mb-4">Oops! Page Not Found</h1>
<p className="text-lg mb-8">The page you're looking for might have moved or doesn't exist.</p>
{/* Add an Image here. Replace with your actual image path. */}
{/* <Image src="/sun.png" alt="June themed sun" width={200} height={200} className="mb-4 rounded-full"/> */}
<a href="/" className="bg-white px-6 py-3 rounded-lg text-orange-500 font-medium hover:bg-yellow-400 hover:text-white transition-all">Go back to Home</a>
</div>
</div>
);
}a june themed
404 Page • 1 day ago
'use client'
import Link from 'next/link';
import { useEffect } from 'react';
export default function NotFound() {
useEffect(() => {
const createStar = () => {
const star = document.createElement('div');
star.classList.add('star', 'absolute', 'bg-white', 'rounded-full', 'animate-twinkle');
star.style.width = `${Math.random() * 3}px`;
star.style.height = `${Math.random() * 3}px`;
star.style.top = `${Math.random() * 100}vh`;
star.style.left = `${Math.random() * 100}vw`;
star.style.animationDelay = `${Math.random() * 2}s`;
document.body.appendChild(star);
};
const numberOfStars = 50;
for (let i = 0; i < numberOfStars; i++) {
createStar();
}
return () => {
// Cleanup: Remove stars when the component unmounts
const stars = document.querySelectorAll('.star');
stars.forEach(star => star.remove());
};
}, []);
return (
<div className="flex items-center justify-center h-screen bg-gradient-to-b from-pink-500 to-pink-200 overflow-hidden">
<div className="container text-center text-white shadow-lg">
<h1 className="text-5xl font-bold mb-2 animate-glow">404</h1>
<p className="text-xl mb-8">Oops! The page you're looking for can't be found.</p>
<Link href="/" className="inline-block px-8 py-4 bg-white bg-opacity-20 rounded-md transition-colors hover:bg-opacity-40">
Go back home
</Link>
</div>
<style jsx global>{`
.animate-glow {
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073, 0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073;
}
}
.animate-twinkle {
animation: twinkle 2s infinite;
}
@keyframes twinkle {
0% { opacity: 0.2; }
50% { opacity: 1; }
100% { opacity: 0.2; }
}
`}</style>
</div>
);
}new pink
404 Page • 1 day ago
'use client'
import React from 'react';
import Link from 'next/link';
const NotFound = () => {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-pink-500 to-pink-300 text-white">
<div className="container mx-auto px-4 py-8 rounded-lg shadow-xl bg-opacity-10 backdrop-blur-md">
{/* Animated Heart Icon */}
<div className="text-6xl mb-4 animate-pulse">💖</div>
<h1 className="text-5xl md:text-7xl font-bold mb-4 text-shadow">404</h1>
<p className="text-xl md:text-2xl mb-8">Oops! The page you are looking for could not be found.</p>
<Link href="/" className="bg-white text-pink-500 px-6 py-3 rounded-full font-semibold hover:bg-pink-100 transition-colors">
Go Home
</Link>
</div>
</div>
);
};
export default NotFound;new pink themed
404 Page • 1 day ago
'use client'
import Link from 'next/link';
export default function NotFound() {
return (
<div className="flex flex-col items-center justify-center h-screen bg-gradient-to-b from-teal-100 to-blue-100 overflow-hidden">
<div className="text-center">
<h1 className="text-6xl font-extrabold text-gray-800 mb-4">404</h1>
<p className="text-xl text-gray-600 mb-8">
Oops! The page you're looking for isn't here.
</p>
<Link href="/" className="inline-block px-6 py-3 bg-red-500 text-white font-semibold rounded-md shadow-md hover:bg-red-600 transition-colors duration-300">
Go Home
</Link>
</div>
{/* Ocean waves animation using Tailwind CSS classes for styling */}
<div className="absolute bottom-0 left-0 w-full h-1/12 bg-blue-500 overflow-hidden">
<div className="absolute w-[6400px] h-48 bg-[url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg)] animate-wave" style={{top: '-198px'}}></div>
<div className="absolute w-[6400px] h-48 bg-[url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg)] animate-wave2" style={{top: '-175px'}}></div>
</div>
</div>
);
}ocean type themed
404 Page • 2 days ago
'use client'
import Link from 'next/link';
import { useEffect } from 'react';
export default function NotFound() {
useEffect(() => {
// Optional: Add some client-side logic here, like logging or analytics
console.log('404 Page Not Found');
}, []);
return (
<div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-yellow-200 to-brown-700 text-white overflow-hidden">
{/* Animated Sun/Circle */}
<div className="absolute w-40 h-40 bg-yellow-400 rounded-full top-1/10 left-1/10 animate-pulse shadow-lg"></div>
{/* Animated Leaves */}
<div className="absolute w-7 h-7 bg-brown-700 rounded-sm rotate-45 animate-fall top-1/10 left-1/5 animation-delay-0"></div>
<div className="absolute w-7 h-7 bg-brown-700 rounded-sm rotate-45 animate-fall top-3/10 left-4/5 animation-delay-500"></div>
<div className="absolute w-7 h-7 bg-brown-700 rounded-sm rotate-45 animate-fall top-1/2 left-1/3 animation-delay-1000"></div>
<style jsx global>{`
@keyframes fall {
0% {
transform: translateY(0) rotate(45deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(45deg);
opacity: 0;
}
}
.animate-fall {
animation: fall 7s linear infinite;
}
`}</style>
<div className="container p-8">
<h1 className="text-6xl font-bold mb-4 text-shadow">404</h1>
<p className="text-2xl mb-8">Oops! The page you're looking for can't be found.</p>
<Link href="/" className="inline-block px-6 py-3 bg-brown-700 hover:bg-brown-800 text-white font-bold rounded-md transition-colors">
Go back home
</Link>
</div>
</div>
);
}find and pick brown and yellow theme
404 Page • 2 days ago
'use client'
import Link from 'next/link';
import React from 'react';
export default function NotFound() {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-pink-200 to-pink-100 overflow-hidden relative">
{/* Cloud animations */}
<div className="absolute top-1/4 left-1/4 w-40 opacity-50 animate-drift">
<img src="https://www.svgrepo.com/show/510987/cloud-weather-clouds.svg" alt="Cloud" />
</div>
<div className="absolute top-1/3 right-1/4 w-52 opacity-50 animate-drift animation-delay-3">
<img src="https://www.svgrepo.com/show/510987/cloud-weather-clouds.svg" alt="Cloud" />
</div>
<div className="absolute bottom-1/4 left-1/3 w-32 opacity-50 animate-drift animation-delay-6">
<img src="https://www.svgrepo.com/show/510987/cloud-weather-clouds.svg" alt="Cloud" />
</div>
<div className="bg-white bg-opacity-80 rounded-xl shadow-lg p-8 text-center relative z-10">
<h1 className="text-6xl font-bold text-pink-500 mb-4 drop-shadow-md">404</h1>
<p className="text-lg text-purple-600 mb-6">Oops! You seem to have wandered into a land of fluffy dreams.</p>
<Link href="/" className="inline-block px-6 py-3 bg-pink-400 text-white font-semibold rounded-md hover:bg-pink-500 transition-colors">
Go back home
</Link>
</div>
<style jsx global>{`
@keyframes drift {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(100vw + 150px));
}
}
.animate-drift {
animation: drift 20s linear infinite;
}
.animation-delay-3 {
animation-delay: 3s;
}
.animation-delay-6 {
animation-delay: 6s;
}
`}</style>
</div>
);
}create pink themed cute childish one
404 Page • 2 days ago
'use client'
import { useEffect, useState } from 'react';
export default function NotFound() {
const [opacity, setOpacity] = useState(0.3);
useEffect(() => {
const intervalId = setInterval(() => {
setOpacity(prev => (Math.random() > 0.5 ? 0.1 : 0.3));
}, 500);
return () => clearInterval(intervalId);
}, []);
return (
<div className="flex items-center justify-center h-screen bg-black text-white font-sans overflow-hidden relative">
<div
className="absolute top-0 left-0 w-full h-full bg-cover bg-center z-[-1]"
style={{
backgroundImage: "url('https://images.unsplash.com/photo-1519682337118-d549ea413684?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')",
opacity: opacity,
transition: 'opacity 0.3s ease'
}}
></div>
<div className="text-center">
<h1 className="text-6xl md:text-8xl font-bold mb-4 text-red-500 shadow-lg">404</h1>
<p className="text-lg md:text-xl mb-6 text-gray-300">You've stumbled into the darkness.</p>
<p className="text-lg md:text-xl mb-6 text-gray-300">This page is lost... just like you're about to be.</p>
<a href="/" className="text-red-400 hover:text-white transition-colors duration-300 border-b border-red-400 hover:border-white pb-1">
Escape back to safety
</a>
</div>
</div>
);
}create a horror themed one
404 Page • 2 days ago
'use client'
import React from 'react';
import Image from 'next/image';
const NotFound = () => {
return (
<div className="relative h-screen bg-black text-white flex flex-col justify-center items-center overflow-hidden">
{/* Background Image */}
<div className="absolute inset-0 z-0">
<Image
src="https://images.unsplash.com/photo-1506318137072-c5a3efc80807?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" // Replace with your space image
alt="Space Background"
layout="fill"
objectFit="cover"
className="opacity-30 animate-pan"
/>
</div>
{/* Content */}
<div className="relative z-10 text-center">
<h1 className="text-6xl md:text-8xl font-bold mb-4 text-shadow">404</h1>
<p className="text-xl md:text-2xl mb-8 text-shadow">Houston, we have a problem. The page you're looking for seems to have drifted off into the cosmos.</p>
<a href="/" className="inline-block bg-transparent hover:bg-sky-500 text-sky-500 font-semibold py-2 px-4 border border-sky-500 hover:border-transparent rounded text-lg transition-colors duration-300">
Return to Earth
</a>
</div>
</div>
);
};
export default NotFound;A space themed 404 page