A custom 404 page can turn a frustrating dead-end into a smooth, branded experience. Below is a clean, modern 404 page with a floating laptop illustration — no JavaScript, no frameworks, just HTML and CSS.
Live Preview
Oops! This page took a wrong turn.
The page you’re looking for doesn’t exist,
has been moved, or is temporarily unavailable.
The Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
.error-404-container {
font-family: 'Poppins', 'Segoe UI', sans-serif;
text-align: center;
padding: 70px 24px;
background: linear-gradient(180deg, #eef4fc 0%, #e3edfa 100%);
max-width: 640px;
margin: 0 auto;
border-radius: 16px;
position: relative;
overflow: hidden;
}
.bg-circle-1 {
position: absolute;
top: 30px;
left: 40px;
width: 60px;
height: 60px;
background: #dbe8fb;
border-radius: 50%;
opacity: 0.6;
}
.bg-circle-2 {
position: absolute;
bottom: 40px;
right: 50px;
width: 90px;
height: 90px;
background: #dbe8fb;
border-radius: 50%;
opacity: 0.5;
}
.bg-circle-3 {
position: absolute;
top: 80px;
right: 80px;
width: 30px;
height: 30px;
background: #c7dafa;
border-radius: 50%;
opacity: 0.7;
}
.laptop {
display: inline-block;
animation: floatUp 3s ease-in-out infinite;
position: relative;
z-index: 2;
}
.error-404-container h2 {
font-size: 24px;
color: #2d3a5a;
margin: 36px 0 12px;
font-weight: 700;
}
.error-404-container p {
font-size: 15px;
color: #7a88a8;
margin: 0 0 32px;
line-height: 1.6;
}
.btn-home {
display: inline-block;
padding: 13px 36px;
background: #3b6fe0;
color: #fff;
text-decoration: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 8px 20px rgba(59,111,224,0.3);
transition: all 0.25s;
}
.btn-home:hover {
background: #2f5bc4;
box-shadow: 0 10px 24px rgba(59,111,224,0.4);
transform: translateY(-2px);
}
@keyframes floatUp {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-14px); }
}
</style>
</head>
<body>
<div class="error-404-container">
<div class="bg-circle-1"></div>
<div class="bg-circle-2"></div>
<div class="bg-circle-3"></div>
<div class="laptop">
<svg width="260" height="190" viewBox="0 0 260 190" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="130" cy="178" rx="90" ry="8" fill="#c7d4e8" opacity="0.5"/>
<rect x="25" y="15" width="210" height="125" rx="10" fill="#ffffff" stroke="#d3ddf0" stroke-width="2"/>
<rect x="25" y="15" width="210" height="28" rx="10" fill="#3b6fe0"/>
<rect x="25" y="33" width="210" height="10" fill="#3b6fe0"/>
<circle cx="42" cy="29" r="4.5" fill="#ff6b6b"/>
<circle cx="58" cy="29" r="4.5" fill="#ffd166"/>
<circle cx="74" cy="29" r="4.5" fill="#6bcf7f"/>
<text x="130" y="98" font-size="48" font-weight="800" fill="#2d3a5a" text-anchor="middle" font-family="Poppins, sans-serif">404</text>
<text x="130" y="125" font-size="15" font-weight="600" fill="#5b6b8c" text-anchor="middle" font-family="Poppins, sans-serif">Page Not Found</text>
<path d="M10 150 L250 150 L232 178 L28 178 Z" fill="#d3ddf0"/>
<path d="M10 150 L250 150 L246 156 L14 156 Z" fill="#e6edf9"/>
</svg>
</div>
<h2>Oops! This page took a wrong turn.</h2>
<p>The page you're looking for doesn't exist,<br>has been moved, or is temporarily unavailable.</p>
<a href="/" class="btn-home">Go Back Home</a>
</div>
</body>
</html>
How to Customize
Change the background color — edit the linear-gradient in .error-404-container. Replace #eef4fc and #e3edfa with any two colors for a different gradient, or use a single flat color like background: #f5f5f5.
Change the accent color — the blue (#3b6fe0) appears in the laptop header, “404” text shadow tones, and the button. Find-and-replace #3b6fe0 everywhere to switch your whole theme color (try #10b981 for green, #ef4444 for red, #8b5cf6 for purple).
Adjust the floating speed — in @keyframes floatUp, the 3s value in .laptop controls duration. Lower it (e.g. 1.5s) for faster movement, raise it (e.g. 5s) for slower.
Adjust how high it floats — change -14px in the floatUp keyframes to a smaller value (e.g. -6px) for subtle movement, or larger (e.g. -25px) for a bigger bounce.
Change the message text — edit the <h2> and <p> content directly. Keep it short and friendly.
Change/remove the decorative circles — the three .bg-circle-* divs are optional background shapes. Delete their <div> tags to remove them, or change width/height/background for different sizes and colors.
Change the button link — replace href="/" with any URL (e.g. /contact or /shop).
Installation in WordPress
- Go to Appearance > Theme File Editor, open
404.php(or duplicatepage.phpand rename it). - Paste the HTML inside the content area, between your theme’s
get_header()andget_footer(). - Move the
<style>block into your theme’sAdditional CSS(Customizer) for cleaner separation. - If your theme doesn’t allow file editing, use a plugin like “404page – your smart custom 404 error page” and paste the body content into a Custom HTML block.