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.


<!DOCTYPE html>
<html lang="en">
        <!-- CSS only -->
        <link href="" 
        rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" 
        <title>Gradient navbar using bootstrap</title>

               background-image: linear-gradient(90deg, #f06efc, #6651f0);
        <nav class="navbar navbar-expand-lg navbar-light gradient-background">
            <div class="container">
                <a class="navbar-brand">"Food, LLC"</a>
                <button type="button" 
                <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>

           <!-- JavaScript Bundle with Popper -->
           <script src="" 

Output :

You can try different colors and see by yourself what looks better.

Here’s the output with different colors that I tried.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: