Adding CSS Gradient Background from gradient generator.

[Gerius]

GTory

[KYG]

Hello there what if I want to make a gradient color for background of the main menu? Could you please help me with the code?

---

@Jasoliya wrote:

Hi,

You can change background color of home and product page by following:

Add this in theme.liquid

{% if template contains 'index' or template contains 'product' %}
<style>
  body{background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);}
</style>
{% endif %}

You can change change color like this for search and add to cart button by adding css in theme.scss

Let me know if you need help.

---

[Jasoliya]

Hi @KYG 

You can add gradient color in background by this css:

#your_menu_id{  background-image: linear-gradient(red, yellow, green);}

You have to change id base on your menu code. you can also change color 

[KYG]

How can I add bottom-border 1 px to the navigation menu? My header and body
are white and when I scroll down I can't distinguish them?

[Jasoliya]

Send your store url

[AlohaAmerica20]

I followed the directions and I went from a dull grey background to a beautiful Gradient!!! Thank you so much Jasoliya! You are very much appreciated!

Let me know what you think of it!

LINK BELOW

www.alohaamerica.us

[Jasoliya]

Its looking good now what do  you want to do? 

[AlohaAmerica20]

I would like to test some different color gradients I think!

Would I make those changes via the HTML theme.liquid code? or in the css.liquid file?

[Jasoliya]

yes you can chaneg css here that only work for home page:

{% if template contains 'index' or template contains 'product' %}
<style>
  body{background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);}
</style>
{% endif %}

You can get color from this site 

[AlohaAmerica20]

Thank You, You are very helpful! Have A Wonderful Day & Happy Thanksgiving!