Adding Color Gradient Code to Footer just as I added to Header.

[harrygoat1218]

Hi Team, this is my home page link (https://kiaappliances.com/)
To display gradient on header I used the code......... 

.t4s-section-header [data-header-height] {
background: rgb(134,172,193);
background: linear-gradient(106deg, rgba(32,51,97,1) 0%, rgba(134,172,193,1) 100%);
}

Now I want to add the same gradient color but to my footer of website which right now is only black, can you please guide me which code to add. I would be grateful.

In the picture you can see that I have placed the header gradient code  in this global custom css, can you tell me what code to put here and how to put it with the header existing one so that the header and footer colors can match.

[Dan-From-Ryviu · Accepted solution]

Please add this code to your Global custom css

#t4s-footer #shopify-section-footer .t4s-section-inner {
background: rgb(134,172,193);
background: linear-gradient(106deg, rgba(32,51,97,1) 0%, rgba(134,172,193,1) 100%);
}

[DevDynamo · Accepted solution]

Hello @harrygoat1218 ,

Please place the below-provided code to your Global Custom CSS.

#t4s-footer #shopify-section-footer .t4s-section-inner {
background: rgb(134,172,193);
background: linear-gradient(106deg, rgba(32,51,97,1) 0%, rgba(134,172,193,1) 100%);
}

Steps:

1. In your Shopify admin, go to Online Store -> Themes.
2. Click Customize.
3. Click Theme settings.
4. Click Custom CSS.
5. Add the above-provided CSS code.
6. Click Save.

Fig: Custom CSS Section

Fig: Footer Result

Thank You.

[Dan-From-Ryviu · Accepted solution]

Please add this code to your Global custom css

#t4s-footer #shopify-section-footer .t4s-section-inner {
background: rgb(134,172,193);
background: linear-gradient(106deg, rgba(32,51,97,1) 0%, rgba(134,172,193,1) 100%);
}

[harrygoat1218]

Thank you Sir, as always you are the best.
Can you please also tell this for Fotter Bottom...........

I also want it to have the same color.

[Dan-From-Ryviu · Accepted solution]

Hi @harrygoat1218 

You can update code to this and check 

#t4s-footer {
background: linear-gradient(106deg, rgba(32,51,97,1) 0%, rgba(134,172,193,1) 100%) !important;
}
#t4s-footer * { background: transparent !important; }

[harrygoat1218]

Thank you Sir it worked, can you also check your messages Sir Dan if possible please..................

[Nirmine1111]

Hi, I am using the Dawn theme and it doesn't work for me. I have put this code into my global custom css but nothing has changed with my footer. Can you help me?

[Dan-From-Ryviu]

Hi @Nirmine1111 

Please try to use this code for your Dawn theme, add it at the bottom of base.css file

footer {
background: linear-gradient(106deg, rgba(32,51,97,1) 0%, rgba(134,172,193,1) 100%) !important;
}
footer * { background: transparent !important; }

[DevDynamo · Accepted solution]

Hello @harrygoat1218 ,

Please place the below-provided code to your Global Custom CSS.

#t4s-footer #shopify-section-footer .t4s-section-inner {
background: rgb(134,172,193);
background: linear-gradient(106deg, rgba(32,51,97,1) 0%, rgba(134,172,193,1) 100%);
}

Steps:

1. In your Shopify admin, go to Online Store -> Themes.
2. Click Customize.
3. Click Theme settings.
4. Click Custom CSS.
5. Add the above-provided CSS code.
6. Click Save.

Fig: Custom CSS Section

Fig: Footer Result

Thank You.