Why isn't my website footer showing a gradient color?

Store Design
, ,

Topic summary

A user attempted to apply a gradient background color to their Shopify store footer using CSS but encountered issues. The initial code targeted #shopify-section-footer but wasn’t working.

Solution provided:

  • The gradient failed because a child element with class site-footer was overriding the styling
  • The fix required targeting a more specific selector: #shopify-section-footer footer#section-footer
  • Additional CSS was needed to set the child element’s background to transparent
  • Code should be added to the theme.scss.liquid file via: Code > Assets > theme.scss.liquid

Outcome:
The more specific CSS selector successfully applied the gradient, and the issue was resolved.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

hello, i have been attempting to use this code to set my footer to agradient color but its not working:

#shopify-section-footer {
background: linear-gradient(27deg, rgba(210,120,242,1) 0%, rgba(252,201,137,1) 100%) !important;
}

any ideas why?

musicfestivalsupplies.com

2

Hi @Cheddarrl
I just checked your store but I didn’t see any the background code as you said above.
in this case I think the gradient does not work because a block child has class “site-footer”
To add the gradient background for the footer, You can try follow this path:
Themes => edit code => asset => theme.scss.liquid
and add this code to bottom of the file theme.scss.liquid

#shopify-section-footer {
background: linear-gradient(27deg, rgba(210,120,242,1) 0%, rgba(252,201,137,1) 100%) !important;
}

.site-footer {
background: transparent!important;
}
1 Like
3

Hi @Cheddarrl

It should be like this

#shopify-section-footer footer#section-footer {
background: linear-gradient(27deg, rgba(210,120,242,1) 0%, rgba(252,201,137,1) 100%) !important;
}

Try it and let me know

1 Like
4

this worked perfectly! thank you