How can I create a scrolling color gradient background on my homepage?

Store Design
1

Hello!

I’m looking to add a color gradient background that changes color seamlessly as you scroll. I’ve seen other gradient solutions that provide a static background gradient color solution. But I’m looking to have the color gradient change as you scroll to the bottom.

The issue I’ve been running into is getting it to be a seamless scroll on the homepage regardless of section?

Any tips would be awesome!

–

Someone suggested following this guide below, but I can’t figure out how to access the body section to test it.

https://www.w3schools.com/howto/howto_css_bg_gradient_scroll.asp

(I’m using Showcase theme)

Thanks in advance!

2

Hi @wavy , the body section is your whole webpage container. All you need to do is add the code in the link you shared at the end of your CSS file (Themes → Edit code → Assets → theme.css) and you should be able to see the effect.

3

@g33kgirl This might be a silly question, but which part of this code is the end of the CSS file?

I’m in theme.js.liquid - Is that the same?

4

This is the code is giving me for what I want. What portion of this do i need?

5

@wavy , no CSS files end with .css.liquid or .css.

This is the code you need to add at the end of your CSS file.

body {
   height: 3000px;
   background-image: linear-gradient(to bottom, #dd2a90, #e7157c, #ed0067, #f00051, #ef0039, #ec3529, #e64e18, #df6200, #d38400, #b8a500, #8bc400, #23df0c, #4121d8, #0064fc, #008fff, #00b4ff, #00d5ff, #00e1f4, #00ebdf, #40f2c2, #71e690, #99d75e, #bdc431, #dfac0c);
}
6

@g33kgirl Thanks so much for your reply!

I did that, but it still seems to just loop the gradient in every section. Is there a workaround to have it as the main background image and have it change as i scroll on homepage?

7

@wavy , sorry I cannot understand what exactly is your requirement. Can you share your website link and also an example website of what you want to achieve?

8

@g33kgirl The website link is wavybooks.com, password is omw

Please reference locolove.com and look at the color gradient when you scroll

Thank you!!

9

Hi @wavy , I took a look at your website. You need to add percentage to the linear gradient to add the effect you want. So something like this (you can adjust the percent to your liking) :

body {
   height: 3000px;
   background-image: linear-gradient(to bottom, #dd2a90 0%, #e7157c 5%, #ed0067 10%, #f00051 15%, #ef0039 20%, #ec3529 25%, #e64e18 30%, #df6200 35%, #d38400 40%, #b8a500 45%, #8bc400 50%, #23df0c 60%, #4121d8 63%, #0064fc 68%, #008fff 70%, #00b4ff 75%, #00d5ff 80%, #00e1f4 85%, #00ebdf 90%, #40f2c2 92%, #71e690 94%, #99d75e 96%, #bdc431 98%, #dfac0c 100%);
  
}
10

@g33kgirl Thanks so much for looking into it. However, I think maybe I’m not being clear in what I’m trying to accomplish.

I would like for the background to be solid gradient color and change as I scroll down the page-> see: https://www.w3schools.com/howto/howto_css_bg_gradient_scroll.asp

However, what’s currently happening is that the gradient is looping for each section. I want the homepage background to be one solid gradient instead of repeating every section.

11

@wavy , I understand your requirement and the code that I shared should have worked on your website. You can see the demo here: https://jsfiddle.net/f7cotx2n/

I can see an error in your theme.js file in the console. So that could be interfering with the code in some way. I think you added the CSS code in your theme.js file accidentally, perhaps. I would suggest you to remove that line and refresh your website again to see if it works.

Screenshot 2021-05-06 at 4.48.21 am.png
Screenshot 2021-05-06 at 4.48.21 am.png2212×128 17.4 KB

Remove this line in red from your .js file.

12

Hello G33Kgirl, I tried following your advice down to the letter but it does not reflect on my website for some reason. Could you please help me? the website is www.cafeolui.com