Laravel 10 - How to Customize Default Error Pages

Note: Tested on Laravel 10.0

Publish Default Error Pages
Customize Error Page

Publish Default Error Pages

To customize Laravel's default error pages, you first need to publish them using the following Artisan command:

php artisan vendor:publish --tag=laravel-errors

This will copy Laravel’s default error views to:

resources/views/errors

You can now modify these views as needed.

Customize Error Page (Example: 404 Page)

To customize the 404 error page, open the 404.blade.php file:

resources/views/errors/404.blade.php

Here’s an example of a custom-styled 404 page:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - Page Not Found</title>
    <style>
        * {
            font-family: 'Google Sans', Arial, sans-serif;
        }
        html, body {
            margin: 0;
            padding: 0;
        }
        .flex-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            color: white;
            animation: colorSlide 15s ease-in-out infinite;
        }
        .text-center {
            text-align: center;
        }
        h1 {
            font-size: 8em;
            margin: 10px;
            border-bottom: 1px dashed white;
        }
        h1 span {
            animation: fadeIn 2s ease infinite;
        }
        #digit1 { animation-delay: 200ms; }
        #digit2 { animation-delay: 300ms; }
        #digit3 { animation-delay: 400ms; }

        h3 {
            margin: 10px;
            animation: fadeIn 2s ease infinite;
        }
        button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 1.1rem;
            font-weight: bold;
            border: 1px solid white;
            background: transparent;
            color: white;
            cursor: pointer;
            transition: background-color 200ms ease-in;
        }
        button:hover {
            background-color: white;
            color: #555;
        }

        @keyframes colorSlide {
            0% { background-color: #152a68; }
            25% { background-color: royalblue; }
            50% { background-color: seagreen; }
            75% { background-color: tomato; }
            100% { background-color: #152a68; }
        }

        @keyframes fadeIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body>
<div class="flex-container">
    <div class="text-center">
        <h1>
            <span id="digit1">4</span>
            <span id="digit2">0</span>
            <span id="digit3">4</span>
        </h1>
        <h3>PAGE NOT FOUND</h3>
        <button onclick="window.location.href='{{ url('/') }}'">Return To Home</button>
    </div>
</div>
</body>
</html>

Test the Custom Page

Now, navigate to any invalid route (e.g., http://localhost:8000/index) and you should see your customized 404 page.

You can follow the same approach to customize other error pages like 500.blade.php, 403.blade.php, etc.

Thanks again for your support, and happy coding! 😊

Souy Soeng