
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 :

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