How to apply a gradient color on my navbar through materialize CSS

In Material Design, each color is defined with a base color and then options to lighten or darken the color.

So there is no way you can apply gradient color on the navbar component in Materialize CSS, you will need a separate CSS file to do that or may be use inline CSS rules.

For example

Step 1: Add materialize.css to your web page.

You can use the following to add materialize css to the webpage.

Step 2: Add CSS to you materialize component.

Now, you can use the materialize css rules change the look and feel of your components such as navbar.

For example , if I have a navbar component

1.  
2.  
3.  
4.  
5. MyLogo 
6. •  
8. Link-1 
10. Link-2 
12. Link-3 
13.  
14.  
15.  
16.  

The result should look like the following.

Step 3: Add custom CSS rule for gradient

Now you can add custom rules for gradient color for your navigation bar.

2. .nav-wrapper { 
3. background: linear-gradient(to right, red , yellow); 
4. } 
5.  

I have used inline css rules, but you can add it to the materialize.css file if required.

The result is a navigation bar with gradient color.