How to Create Custom Error Page in Laravel 11

Websolutionstuff | May-08-2024 | Categories : Laravel HTML

Hello developers! In this article, we'll see how to create a custom error page in laravel 11. Here, we'll customize a laravel default error page. you can design an error page as your theme and requirements. Laravel makes it easy to display custom error pages for various HTTP status codes.

For example, to customize the error page for 404 HTTP status codes, create a resources/views/errors/404.blade.php view template. This view will be rendered for all 404 errors generated by your application.

You can redesign 404, 500, 419, etc error pages in laravel 11.

Custom Error Page in Laravel 11

Below is a list of HTTP status messages that might be returned:

  • 1xx: Information
  • 2xx: Successful
  • 3xx: Redirection
  • 4xx: Client Error
  • 5xx: Server Error

 

Step 1: Install Laravel 11 Application

 

In this step, we'll install the laravel 11 application using the following command.

composer create-project laravel/laravel laravel-11-app

 

Step 2: Publish Error Page Default Files

Now, we'll publish Laravel's default error page templates using the vendor:publish Artisan command. Once the templates have been published, you may customize them to your liking.

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

 

Step 3: Redesign 404 Error Page

Then, we'll redesign the 404 error page.

resources/views/errors/404.blade.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{background:#000}.fon{overflow:hidden;left:-10px;position:absolute;width:100%;height:100%;background:linear-gradient(#000,#002)}.rock-mountain_1,.rock-mountain_s_1,.rock-mountain_2,.rock-mountain_s_2,.rock-mountain_3,.rock-mountain_s_3{width:140px;height:140px;background:linear-gradient(90deg,#222,#000);transform:rotate(45deg);position:absolute}.rock{position:absolute;bottom:3%;left:40%}.rock-mountain_1{z-index:8;left:140px;bottom:25px;width:180px;height:180px}.rock-mountain_s_1{z-index:7;transform:rotate(52deg);left:125px;bottom:25px;width:180px;height:180px;background:#111}.rock-mountain_2{z-index:11;left:-50px;bottom:30px;width:180px;height:180px}.rock-mountain_s_2{z-index:10;transform:rotate(52deg);left:-65px;bottom:30px;width:180px;height:180px;background:#111}.rock-mountain_3{z-index:10;left:60px;bottom:25px;width:180px;height:180px}.rock-mountain_s_3{z-index:9;transform:rotate(52deg);left:45px;bottom:25px;width:180px;height:180px;background:#111}.horizon div{left:20%;z-index:15;position:absolute;bottom:0;border-radius:100px 100px 0 0;background:linear-gradient(#333,#111);width:200px;height:150px}.horizon div:nth-child(2){z-index:15;left:48%;bottom:0;height:130px;background:linear-gradient(120deg,#333,#111)}.horizon div:nth-child(3){z-index:14;background:linear-gradient(#222,#111);left:40%;bottom:0;height:180px;width:150px}.horizon div:nth-child(4){z-index:14;background:linear-gradient(190deg,#333,#111);left:38%;bottom:20px;height:170px}.horizon div:nth-child(5){z-index:15;left:25%;bottom:0;height:170px;background:linear-gradient(210deg,#333,#111)}.horizon div:nth-child(6){background:linear-gradient(180deg,#444,#111);z-index:14;left:34%;bottom:0;height:190px}.horizon div:nth-child(7){background:linear-gradient(170deg,#333,#111);z-index:13;left:55%;bottom:0;height:140px}.horizon div:nth-child(8){background:linear-gradient(160deg,#444,#111);z-index:14;left:50%;bottom:0;height:160px}.horizon div:nth-child(9){background:linear-gradient(170deg,#333,#111);z-index:15;left:37%;bottom:0;height:160px}.horizon div:nth-child(10){background:linear-gradient(-210deg,#333,#111);z-index:13;left:55%;bottom:0;height:160px}.horizon div:nth-child(11){background:linear-gradient(-180deg,#222,#111);z-index:13;left:67%;bottom:0;height:130px}.horizon div:nth-child(12){background:linear-gradient(-180deg,#222,#111);z-index:15;left:70%;bottom:0;height:100px}.horizon div:nth-child(13){background:linear-gradient(180deg,#333,#111);z-index:110;left:15%;bottom:0;height:100px}.horizon div:nth-child(14){background:linear-gradient(180deg,#333,#111);z-index:110;left:75%;bottom:0;height:100px}.horizon div:nth-child(15){background:linear-gradient(180deg,#333,#111);z-index:110;left:60%;bottom:0;height:130px}.horizon div:nth-child(16){width:85%;height:600px;border-radius:300px 400px 0 0;background:linear-gradient(130deg,#222,#000);z-index:12;left:12%;bottom:-405px}.satellite{-webkit-animation:satellit-anima 25s linear infinite;-moz-animation:satellit-anima 25s linear infinite;animation:satellit-anima 25s linear infinite;transform:rotate(120deg);z-index:5;color:#888;font-size:18px;position:absolute;left:10%;bottom:0}.hill{z-index:14;background:linear-gradient(80deg,#333,#111);position:absolute;bottom:5%;left:28%;width:200px;height:190px;border-radius:100px 100px 0 0}.moon-sky{-webkit-animation:moon-anim 3s linear alternate-reverse infinite;-moz-animation:moon-anim 3s linear alternate-reverse infinite;animation:moon-anim 3s linear alternate-reverse infinite;box-shadow:0 0 15px 5px #fc0;width:100px;height:100px;border-radius:50px;background:#fc0;position:absolute;top:10%;left:5%}.cosmos-star div{-webkit-animation:star-anim 200ms linear alternate-reverse infinite;-moz-animation:star-anim 200ms linear alternate-reverse infinite;animation:star-anim 200ms linear alternate-reverse infinite;position:absolute;height:1px;width:1px;box-shadow:0 0 15px 3px #fff;background:#fff}.cosmos-star div:nth-child(1){left:75%;top:10%}.cosmos-star div:nth-child(2){left:45%;top:12%}.cosmos-star div:nth-child(3){left:20%;top:12%}.cosmos-star div:nth-child(4){left:30%;top:18%}.cosmos-star div:nth-child(5){left:92%;top:17%}.cosmos-star div:nth-child(6){left:60%;top:5%}.cosmos-star div:nth-child(7){left:67%;top:16%}.cosmos-star div:nth-child(8){left:5%;top:30%}.meteores div{position:absolute;top:50px;left:280px;width:400px;height:1px;transform:rotate(-45deg);background:linear-gradient(to left,transparent 0%,#fff 100%)}.meteores div:before{content:'';position:absolute;width:4px;height:5px;background:#fff;border-radius:50%;box-shadow:0 0 14px 4px #fff;margin-top:-2px}.meteores div:nth-child(1){top:45%;left:100%;-webkit-animation:meteors 3s linear infinite;-moz-animation:meteors 3s linear infinite;animation:meteors 3s linear infinite}.meteores div:nth-child(2){top:100%;left:70%;-webkit-animation:meteors 4s linear infinite;-moz-animation:meteors 4s linear infinite;animation:meteors 4s linear infinite}.meteores div:nth-child(3){top:70%;left:20%;-webkit-animation:meteors 2s linear infinite;-moz-animation:meteors 2s linear infinite;animation:meteors 2s linear infinite}.page-404,.not-found{transform:rotate(0deg);font:55px 'Carter One',cursive;cursive;color:#777;position:absolute;display:block;bottom:10%;left:46.5%;z-index:120;text-shadow:2px 2px 2px #000}.not-found{bottom:3%;left:45%;font-size:40px}.my-cat{z-index:100;position:absolute;left:35%;bottom:235px}.ear-l,.ear-r,.ear-fur-l,.ear-fur-r{position:relative;z-index:2;border-radius:0 50px 0 0;width:12px;height:14px;margin:0 0 -16px 0;padding:2px;transform:rotate(-2deg);background:linear-gradient(40deg,#111,#444)}.ear-r,.ear-fur-r{border-radius:50px 0 10px 0;margin:0 25px -10px;transform:rotate(15deg);background:linear-gradient(-50deg,#333,#333,#111)}.ear-fur-l,.ear-fur-r{border-radius:0 50px 0 20px;padding:0;background:linear-gradient(-30deg,#111,#222);width:10px;height:14px}.ear-fur-r{margin:0 2px;background:linear-gradient(-290deg,#111,#222);transform:rotate(8deg);border-radius:50px 0 20px}.head-cat{z-index:1;position:relative;border-radius:50px;width:40px;height:35px;background:linear-gradient(40deg,#000,#444);box-shadow:0 2px 1px #111}.tabby-cat,.tabby-cat-1,.tabby-cat-2{width:20px;height:2px;background:#222;position:absolute;margin:2px 10px}.tabby-cat-1{margin:6px 10px;background:#222}.tabby-cat-2{height:2px;margin:10px 17px;background:linear-gradient(#111,#222);width:6px}.muzzle-cat{width:22px;height:15px;background:linear-gradient(60deg,#111,#222);border-radius:50px;top:18px;left:11px;position:absolute}.whiskers div,.whiskers div:nth-child(3){height:1px;width:16px;background:linear-gradient(90deg,#000,#555);position:absolute;left:-7px;top:31px;transform:rotate(-15deg)}.whiskers div:nth-child(1){top:28px;left:-5px;transform:rotate(-5deg)}.whiskers div:nth-child(2){width:17px;top:35px;left:-5px;transform:rotate(-25deg)}.whiskers div:nth-child(3),.whiskers div:nth-child(4),.whiskers div:nth-child(5){background:linear-gradient(90deg,#555,#000);transform:rotate(10deg);left:30px;top:31px}.whiskers div:nth-child(4){left:29px;top:28px;transform:rotate(--2deg);width:20px}.whiskers div:nth-child(5){left:27px;top:34px}.jaws-cat{-webkit-animation:jaws-cat 5s infinite;-moz-animation:jaws-cat 5s infinite;animation:jaws-cat 5s infinite;position:absolute;border-radius:30px 10px;position:absolute;border-radius:20px 20px 70px 70px;width:7px;height:3px;background:linear-gradient(#000,#d46);z-index:50;top:30px;left:17px}.eye-l,.eye-r{-webkit-animation:sleep-cat 7s linear infinite;-moz-animation:sleep-cat 7s linear infinite;animation:sleep-cat 7s linear infinite;position:absolute;border-radius:35px 25px 30px 30px;width:10px;height:7px;background:#df9;z-index:500;top:12px;left:7px}.eye-r{left:24px!important}.eye-lz,.eye-rz{-webkit-animation:eye-cat 7s linear infinite;-moz-animation:eye-cat 7s linear infinite;animation:eye-cat 7s linear infinite;position:absolute;border-radius:30px 10px;transform:rotate(-45deg);width:7px;height:6px;background:#000;z-index:500;left:2px;top:0}.eye-rz{left:1px}.cat-nose{position:absolute;border-radius:20px 20px 70px 70px;width:7px;height:7px;background:linear-gradient(#000,#555);z-index:500;margin:19px 16px}.body-cat{transform:rotate(2deg)}.body-cat,.body-cat-1{width:30px;height:60px;border-radius:70px 0 5px 35px;margin:-10px -7px;background:linear-gradient(120deg,#000,#111,#222);position:absolute}.body-cat-1{border-radius:25px 80px 25px 25px;height:65px;margin:-14px 6px}.paw-cat-l,.paw-cat-r{position:absolute;width:12px;height:46px;margin:5px 4px;background:linear-gradient(150deg,rgb(1 1 1 / .4),rgb(34 34 34 / .8)),linear-gradient(92deg,#111 3px,#222 70%,#111);box-shadow:-5px -2px 5px #111;border-radius:30px 0 5px 15px}.paw-cat-r{margin:5px 22px;border-radius:0 30px 15px 5px;background:linear-gradient(rgb(1 1 1 / .4),rgb(34 34 34 / .8)),linear-gradient(90deg,#111,#222 70%,#111)}.paw-cat-l div,.paw-cat-r div,.tail-cat{border-radius:70px 10px 70px 10px;background:linear-gradient(#111,#222);position:absolute;width:12px;height:7px;top:38px;left:1px}.paw-cat-r div{border-radius:10px 70px 10px 70px}.tail-cat{transform:rotate(-15deg);top:80px;width:40px;height:13px;border-radius:40px;background:linear-gradient(60deg,#111,#222)}@-webkit-keyframes eye-cat{0%{left:3px}10%{border-radius:30px}20%{border-radius:30px}30%{left:1px}40%{top:2px;right:2px}50%{left:4px}60%{bottom:2px}70%{bottom:0;width:0}71%{width:5px}80%{left:2px}97%{bottom:1px;width:0}100%{bottom:2px}}@-moz-keyframes eye-cat{0%{left:3px}10%{border-radius:30px}20%{border-radius:30px}30%{left:1px}40%{top:2px;right:2px}50%{left:4px}60%{bottom:2px}70%{bottom:0;width:0}71%{width:5px}80%{left:2px}97%{bottom:1px;width:0}100%{bottom:2px}}@keyframes eye-cat{0%{left:3px}10%{border-radius:30px}20%{border-radius:30px}30%{left:1px}40%{top:2px;right:2px}50%{left:4px}60%{bottom:2px}70%{bottom:0;width:0}71%{width:5px}80%{left:2px}97%{bottom:1px;width:0}100%{bottom:2px}}@-webkit-keyframes sleep-cat{0%{height:7px;top:12px;border-radius:30px}35%{height:8px;top:12px;border-radius:30px}56%{height:4px;top;13px}70%{height:3px;top:15px}71%{height:8px;top:12px}85%{height:3px;top:12px}97%{height:0;top:15px}}@-moz-keyframes sleep-cat{0%{height:7px;top:12px;border-radius:30px}35%{height:8px;top:12px;border-radius:30px}56%{height:4px;top;13px}70%{height:3px;top:15px}71%{height:8px;top:12px}85%{height:3px;top:12px}97%{height:0;top:15px}}@keyframes sleep-cat{0%{height:7px;top:12px;border-radius:30px}35%{height:8px;top:12px;border-radius:30px}56%{height:4px;top;13px}70%{height:3px;top:15px}71%{height:8px;top:12px}85%{height:3px;top:12px}97%{height:0;top:15px}}@-webkit-keyframes jaws-cat{0%{height:0}50%{height:3px}100%{height:0}}@-moz-keyframes jaws-cat{0%{height:0}50%{height:3px}100%{height:0}}@keyframes jaws-cat{0%{height:0}50%{height:3px}100%{height:0}}@-webkit-keyframes star-anim{0%{box-shadow:0 0 10px 2px #fff}100%{box-shadow:0 0 5px 1px #fff}}@-moz-keyframes star-anim{0%{box-shadow:0 0 10px 2px #fff}100%{box-shadow:0 0 5px 1px #fff}}@keyframes star-anim{0%{box-shadow:0 0 10px 2px #fff}100%{box-shadow:0 0 5px 1px #fff}}@-webkit-keyframes moon-anim{0%{box-shadow:0 0 20px 5px #fc0}100%{box-shadow:0 0 10px 5px #fc0}}@-moz-keyframes moon-anim{0%{box-shadow:0 0 20px 5px #fc0}100%{box-shadow:0 0 10px 5px #fc0}}@keyframes moon-anim{0%{box-shadow:0 0 20px 5px #fc0}100%{box-shadow:0 0 10px 5px #fc0}}@-webkit-keyframes satellit-anima{0%{bottom:0;opacity:0}2%{opacity:1;transform:rotate(130deg)}15%{transform:rotate(120deg);color:#fff;text-shadow:0 0 8px}35%{font-size:20px;left:15%;transform:rotate(180deg)}55%{font-size:17px;transform:rotate(185deg);color:#ff8;text-shadow:0 0 8px}57%{font-size:14px}100%{font-size:10px;transform:rotate(200deg);bottom:90%;left:90%;opacity:0}}@-moz-keyframes satellit-anima{0%{bottom:0;opacity:0}2%{opacity:1;transform:rotate(130deg)}15%{transform:rotate(120deg);color:#fff;text-shadow:0 0 8px}35%{font-size:20px;left:15%;transform:rotate(180deg)}55%{font-size:17px;transform:rotate(185deg);color:#ff8;text-shadow:0 0 8px}57%{font-size:14px}100%{font-size:10px;transform:rotate(200deg);bottom:90%;left:90%;opacity:0}}@keyframes satellit-anima{0%{bottom:0;opacity:0}2%{opacity:1;transform:rotate(130deg)}15%{transform:rotate(120deg);color:#fff;text-shadow:0 0 8px}35%{font-size:20px;left:15%;transform:rotate(180deg)}55%{font-size:17px;transform:rotate(185deg);color:#ff8;text-shadow:0 0 8px}57%{font-size:14px}100%{font-size:10px;transform:rotate(200deg);bottom:90%;left:90%;opacity:0}}@-webkit-keyframes meteors{0%{margin:-300px -300px 0 0;opacity:1}8%{opacity:0}30%{margin-top:300px -600px 0 0;opacity:0}100%{opacity:0}}@-moz-keyframes meteors{0%{margin:-300px -300px 0 0;opacity:1}8%{opacity:0}30%{margin-top:300px -600px 0 0;opacity:0}100%{opacity:0}}@keyframes meteors{0%{margin:-300px -300px 0 0;opacity:1}8%{opacity:0}30%{margin-top:300px -600px 0 0;opacity:0}100%{opacity:0}}
    </style>
</head>

<body>
    <link href='https://fonts.googleapis.com/css?family=Carter+One' rel='stylesheet' type='text/css'>

    <div class="fon">
        <div class="horizon">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="hill"></div>

        <span class="not-found">Page - Not Found</span>
        <span class="page-404">ERROR 404</span>
        <div class="moon-sky"></div>
        <div class="satellite">☄</div>
        <div class="meteores">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="cosmos-star">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="my-cat">
            <div class="ear-l">
                <div class="ear-fur-l"></div>
            </div>
            <div class="ear-r">
                <div class="ear-fur-r"></div>
            </div>
            <div class="head-cat">
                <div class="tabby-cat"></div>
                <div class="tabby-cat-1"></div>
                <div class="tabby-cat-2"></div>
                <div class="eye-l">
                    <div class="eye-lz"></div>
                </div>
                <div class="cat-nose"></div>
                <div class="eye-r">
                    <div class="eye-rz"></div>
                </div>
                <div class="muzzle-cat"></div>
                <div class="	jaws-cat"></div>
                <div class="whiskers">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="body-cat"></div>
            <div class="body-cat-1"></div>
            <div class="paw-cat-l">
                <div></div>
            </div>
            <div class="paw-cat-r">
                <div></div>
            </div>
            <div class="tail-cat"></div>
        </div>
        <div class="rock">
            <div class="rock-mountain_1"></div>
            <div class="rock-mountain_s_1"></div>
            <div class="rock-mountain_2"></div>
            <div class="rock-mountain_s_2"></div>
            <div class="rock-mountain_3"></div>
            <div class="rock-mountain_s_3"></div>
        </div>
    </div>
    </div>
</body>

</html>

Output:

Custom 404 Error Page Laravel 11

 

Step 4: Redesign 500 Error Page

Then, we'll redesign the 500 error page.

resources/views/errors/500.blade.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .page_404{padding:40px 0;background:#fff;font-family:"Arvo",serif}.page_404 img{width:100%}.four_zero_four_bg{background-image:url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);height:400px;background-position:center}.four_zero_four_bg h1{font-size:80px}.four_zero_four_bg h3{font-size:80px}.link_404{color:#fff!important;padding:10px 20px;background:#39ac31;margin:20px 0;display:inline-block}.contant_box_404{margin-top:-50px}
    </style>
</head>

<body>
    <section class="page_404">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 ">
                    <div class="col-sm-10 col-sm-offset-1  text-center">
                        <div class="four_zero_four_bg">
                            <h1 class="text-center ">500</h1>

                        </div>

                        <div class="contant_box_404">
                            <h3 class="h2">
                                Internal server error
                            </h3>

                            <p>We are currently trying to fix the problem.</p>

                            <a href="" class="link_404">Go to Home</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>

</html>

Output:

Custom 500 Error Page Laravel 11

 

You might also like:

Tags : Laravel HTML Error Laravel 11
Recommended Post
Featured Post
How To Copy Text To Clipboard In React JS
How To Copy Text To Clipboard...

In this article, we will see how to copy text to the clipboard in react js. you will learn how to copy text to...

Read More

Aug-31-2022

Laravel 9 Order By Query Example
Laravel 9 Order By Query Examp...

In this article, we will see laravel 9 order by query example. how to use order by in laravel 9.The orderBy me...

Read More

Mar-28-2022

Bootstrap DateTimePicker Example
Bootstrap DateTimePicker Examp...

In this post i will show you how to implement bootstrap datetimepicker with example, bootstrap 4 datetimepicke...

Read More

Apr-02-2021

How To Create Web Notifications In Laravel 9 Using Pusher
How To Create Web Notification...

In this article, we will see how to create web notifications in laravel 9 using pusher. Here, we will learn how to...

Read More

Feb-03-2023


Categories

Tools
Online Json Formatter
Online Password Generator
Online Character Counter
Online CSS Minifier
Online CSS Beautifier
Online Image Compressor New
EMI Calculator New
Online CSS To SCSS Converter New
Online CSS To SASS Converter New
Online CSS To LESS Converter New
Online Barcode Generator New

Popular Post
Laravel 8 Toastr Notifications Example
How To Integrate Paypal Payment Gateway In Laravel
Laravel 9 User Role and Permission
How to Send E-mail Using Queue in Laravel 7/8
Laravel 8 User Roles and Permissions Without Package
Laravel 8 Form Class Not Found
How To Create User Roles And Permissions In Laravel 10
How To Add Bootstrap Modal In Laravel
Laravel 8 User Role and Permission
How To Get Current Date And Time In Node.js