Gradient navbar -Bootstrap 5

In this post, I will tell you about using a gradient background for the navbar. I have used bootstrap here to create navbar only. It has nothing to do with the gradient background. I will apply a gradient using CSS background-image property.

gradient_navbar.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- CSS only -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" 
        crossorigin="anonymous">         
        <title>Gradient navbar using bootstrap</title>

        <style>
            .gradient-background{
               background-image: linear-gradient(90deg, #f06efc, #6651f0);
             }
        </style>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-light gradient-background">
            <div class="container">
                <a class="navbar-brand">"Food, LLC"</a>
                <button type="button" 
                class="navbar-toggler" 
                data-bs-target="#collapsibleNavbar" 
                data-bs-toggle="collapse">
                <span class="navbar-toggler-icon"></span></button>
               <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item"><a href="#" class="nav-link active">Menu</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">About</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
                </ul>
               </div>
            </div>
        </nav>

           <!-- JavaScript Bundle with Popper -->
           <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" 
           integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" 
           crossorigin="anonymous"></script>
    </body>
</html>

Output :