Animated 404 page html css javascript template - source code

Key Features:

• Animated 404 Text: Each digit floats independently with a smooth animation
• Floating Background Elements: Decorative circles that pulse gently
• Animated Broken Links: Floating link emojis that spin slowly
• Button Ripple Effect: Click animation on the home button (with JavaScript)
• Staggered Animations: Elements fade in at different times
• Responsive Design: Works on mobile and desktop devices
• Modern Color Scheme: Purple-based palette that's easy on the eyes
• Clean Typography: Uses Poppins font for a modern look

Customization Options:

• Change colors by modifying the CSS variables at the top
• Adjust animation timings in the CSS keyframes
• Replace the link emojis with your own icons
• Modify the text content to match your brand voice
• Add more background elements or remove some for a simpler look
• This template provides a friendly, engaging 404 page that keeps users on your site rather than frustrating them with a dead end.

<div class="bg-circle circle-1"></div> <div class="bg-circle circle-2"></div> <div class="bg-circle circle-3"></div> <div class="broken-link broken-link-1">🔗</div> <div class="broken-link broken-link-2">🔗</div> <div class="broken-link broken-link-3">🔗</div> <div class="error-container"> <h1 class="error-code"> <span>4</span> <span>0</span> <span>4</span> </h1> <h2 class="error-message">Oops! Page Not Found</h2> <p class="error-description"> The page you're looking for doesn't exist or has been moved. Don't worry, you can find your way back home. </p> <a href="/" class="home-button">Return to Homepage</a> </div>

CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.

 /* Base Styles */
        :root {
            --primary-color: #6c5ce7;
            --secondary-color: #a29bfe;
            --text-color: #2d3436;
            --light-text: #636e72;
            --white: #ffffff;
            --error-color: #ff7675;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        
        body {
            background-color: #f5f6fa;
            color: var(--text-color);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        
        /* Main Container */
        .error-container {
            text-align: center;
            max-width: 600px;
            padding: 2rem;
            position: relative;
            z-index: 1;
        }
        
        /* 404 Text Animation */
        .error-code {
            font-size: 8rem;
            font-weight: 900;
            color: var(--primary-color);
            margin-bottom: 1rem;
            position: relative;
            display: inline-block;
            animation: float 3s ease-in-out infinite;
        }
        
        .error-code span:nth-child(1) { animation-delay: 0.1s; }
        .error-code span:nth-child(2) { animation-delay: 0.2s; }
        .error-code span:nth-child(3) { animation-delay: 0.3s; }
        
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
        
        /* Error Message */
        .error-message {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            color: var(--text-color);
            animation: fadeIn 1s ease-out;
        }
        
        /* Description */
        .error-description {
            color: var(--light-text);
            margin-bottom: 2rem;
            font-size: 1.1rem;
            line-height: 1.6;
            animation: fadeIn 1.5s ease-out;
        }
        
        /* Home Button */
        .home-button {
            display: inline-block;
            padding: 12px 30px;
            background-color: var(--primary-color);
            color: var(--white);
            text-decoration: none;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(108, 92, 231, 0.3);
            animation: fadeIn 2s ease-out;
            position: relative;
            overflow: hidden;
        }
        
        .home-button:hover {
            background-color: #5649c0;
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(108, 92, 231, 0.4);
        }
        
        .home-button:active {
            transform: translateY(0);
        }
        
        /* Animated Background Elements */
        .bg-circle {
            position: absolute;
            border-radius: 50%;
            background: rgba(166, 155, 254, 0.1);
            z-index: -1;
        }
        
        .circle-1 {
            width: 300px;
            height: 300px;
            top: -100px;
            left: -100px;
            animation: pulse 8s infinite alternate;
        }
        
        .circle-2 {
            width: 200px;
            height: 200px;
            bottom: -50px;
            right: -50px;
            animation: pulse 6s infinite alternate-reverse;
        }
        
        .circle-3 {
            width: 150px;
            height: 150px;
            top: 50%;
            right: 20%;
            animation: pulse 7s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); opacity: 0.3; }
            100% { transform: scale(1.2); opacity: 0.1; }
        }
        
        /* Broken Link Animation */
        .broken-link {
            position: absolute;
            width: 100px;
            height: 100px;
            opacity: 0.7;
        }
        
        .broken-link-1 {
            top: 20%;
            left: 10%;
            animation: float 4s ease-in-out infinite, spin 10s linear infinite;
        }
        
        .broken-link-2 {
            bottom: 15%;
            left: 20%;
            animation: float 5s ease-in-out infinite reverse, spin 8s linear infinite reverse;
        }
        
        .broken-link-3 {
            top: 30%;
            right: 15%;
            animation: float 6s ease-in-out infinite, spin 12s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .error-code {
                font-size: 6rem;
            }
            
            .error-message {
                font-size: 1.3rem;
            }
            
            .circle-1, .circle-2, .circle-3 {
                display: none;
            }
        }

JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.

// Additional animation effects
        document.addEventListener('DOMContentLoaded', function() {
            // Add ripple effect to button
            const button = document.querySelector('.home-button');
            
            button.addEventListener('click', function(e) {
                e.preventDefault();
                
                // Create ripple element
                const ripple = document.createElement('span');
                ripple.classList.add('ripple');
                this.appendChild(ripple);
                
                // Get click position
                const x = e.clientX - e.target.getBoundingClientRect().left;
                const y = e.clientY - e.target.getBoundingClientRect().top;
                
                // Position ripple
                ripple.style.left = `${x}px`;
                ripple.style.top = `${y}px`;
                
                // Remove ripple after animation
                setTimeout(() => {
                    ripple.remove();
                    window.location.href = '/'; // Redirect after animation
                }, 1000);
            });
            
            // Add style for ripple effect
            const style = document.createElement('style');
            style.textContent = `
                .ripple {
                    position: absolute;
                    background: rgba(255, 255, 255, 0.4);
                    border-radius: 50%;
                    transform: scale(0);
                    animation: ripple 0.6s linear;
                    pointer-events: none;
                }
                
                @keyframes ripple {
                    to {
                        transform: scale(4);
                        opacity: 0;
                    }
                }
            `;
            document.head.appendChild(style);
        });