A gradient navbar is a stylish way to make your website look modern and professional. In this article, we will show you how to create a gradient navbar using HTML only. No CSS or JavaScript is required.
Approach: Please refer linear-gradient() method to create a gradient background.
- This HTML code uses the “style” attribute to add inline styling to the “nav” element.
- The “background-image” property is set to a linear gradient value which starts from the left of the element and moves towards the right. The gradient uses three color stops #9acd32, #ffeb3b, and #006400. These colors are shades of green and yellow.
- The “padding” property adds 10 pixels of space to the top and bottom of the “nav” element and sets 0 pixels of padding on the left and right.
- The “ul” element contains a list of links, and the “style” attribute is used to apply inline styling to this element. The “list-style” property is set to “none” to remove the default bullet points from the list items, and the “display” property is set to “flex” to make the list items appear in a row. The “justify-content” property is set to “space-between” to evenly distribute the list items along the horizontal axis.
- Each list item is styled using the “style” attribute with “margin” properties to add 10 pixels of space on the left and right.
HTML Code:
Step 1: Create the HTML structure. The first step is to create the HTML structure of the navbar. The following is an example of a simple navbar.
<!DOCTYPE html> <html>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<h1 style="color:green">GeeksforGeeks</h1>
<p>Default code has been loaded into the Editor.</p>
</body>
</html>
|
Step 2: Add the gradient effect
To add the gradient effect, you can use the background-image property in the HTML nav element. The gradient effect can be created using a CSS linear-gradient() function that specifies the start and ends colors of the gradient.
<!DOCTYPE html> <html>
<body>
<nav style="background-image:linear-gradient(
to right, #00bfff, #00ffd5);">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
Default code has been
loaded into the Editor.
</p>
</body>
</html>
|
You can choose any two colors you like for the gradient effect. The `to right` keyword specifies the direction of the gradient.
Step 3: Style the Navbar
Now, you have added the gradient effect, you may want to style the navbar to make it look more professional. You can do this by adding some CSS styles to the nav element and the ul element.
Example 1: The following demonstrates the gradient navbar using the above steps and references.
<!DOCTYPE html> <html>
<body>
<nav style="background-image:linear-gradient(
to right, #00bfff, #00ffd5);
padding: 10px 0;">
<ul style="list-style:none;
display:flex;
justify-content:space-between;">
<li style="margin:0 10px;">
<a href="#">Home</a>
</li>
<li style="margin:0 10px;">
<a href="#">About</a>
</li>
<li style="margin:0 10px;">
<a href="#">Services</a>
</li>
<li style="margin:0 10px;">
<a href="#">Contact</a>
</li>
</ul>
</nav>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
Default code has been
loaded into the Editor.
</p>
</body>
</html>
|
Output:
Example 2: This code will create a gradient that goes from a red-pink (#ff4b2b) to a deep pink (#ff416c), then to the red-pink again (#ff4b2b), then to an orange (#ff7519), and finally to a bright yellow (#ffb900).
<!DOCTYPE html> <html>
<body>
<nav style="background: linear-gradient(
to right, #ff4b2b, #ff416c,
#ff4b2b, #ff7519, #ffb900);
padding: 10px 0;">
<ul style="list-style:none;
display:flex;
justify-content:space-between;">
<li style="margin:0 10px;">
<a href="#">Home</a>
</li>
<li style="margin:0 10px;">
<a href="#">About</a>
</li>
<li style="margin:0 10px;">
<a href="#">Services</a>
</li>
<li style="margin:0 10px;">
<a href="#">Contact</a>
</li>
</ul>
</nav>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2 style="color:green;">
Welcome To GFG
</h2>
<p>
Default code has been
loaded into the Editor.
</p>
</body>
</html>
|
Output:
Example 3: The gradient uses three color stops: #9acd32 (a light green), #ffeb3b (a bright yellow), and #006400 (a dark green). These colors are specified in the order they should appear in the gradient.
<!DOCTYPE html> <html>
<body>
<nav style="background-image:linear-gradient(
to right, #9acd32, #ffeb3b, #006400);
padding: 10px 0;">
<ul style="list-style:none;
display:flex;
justify-content:space-between;">
<li style="margin:0 10px;">
<a href="#">Home</a>
</li>
<li style="margin:0 10px;">
<a href="#">About</a>
</li>
<li style="margin:0 10px;">
<a href="#">Services</a>
</li>
<li style="margin:0 10px;">
<a href="#">Contact</a>
</li>
</ul>
</nav>
<h1 style="color:green;">
GeeksforGeeks
</h1>
</body>
</html>
|
Output:
Conclusion: Creating a gradient navbar using HTML is an easy and uncomplicated procedure that can give your website a sleek and contemporary appearance. By using a few lines of code, you can effortlessly add a touch of style and elegance to your website’s navigation bar. This method is especially advantageous when you don’t have the luxury of using CSS or JavaScript, or when you need to create a basic navigation bar swiftly. Overall, it is a simple yet effective way to enhance the aesthetic appeal of your website without having to rely on more complex design techniques.