CSS background color change while scrolling

1

I think we all know CSS-tricks and I noticed the bakground color on their website to change while scrolling until it’s full orange in the bottom of the page, example:

Any idea how to achieve that ?

2

I’m not a Pro here I just started coding but I think it has something to do with CSS Gradient, I’m working on it. I will let you know if I could or couldn’t do.

3

Yeah probably, and I have worked with CSS Gradient before but haven’t been able to achieve this.

I appreciate it :slight_smile:

4

I hope I’m right mate, but correct me if I’m wrong. That sort of technique in CSS-Tricks website can be achieved by CSS Gradient, I tried it myself I make a really long page to see color transition clearly and I figured CSS-Tricks website used linear gradient.

Try giving a background-image property a value of linear gradient or any type of gradient you prefer to your body if you want a change to occur in the entire page like Chris’s website. You may differ in color values but the concept should be the same.

They say a gradient is not exactly a real CSS color it’s actually an image with absolute dimensions and no fixed size. The actual size of gradient by default matches the size of an element it’s applied to.

This is the line of code to achieve that:

body {
background-image: linear-gradient(white, orange);
}

It worked for me.

1 Like
5

Respect! keep it up :smiley:

1 Like
6

I just looked at the site with Dev Tools, and it looks like you guys are right and, to be more precise, they’re doing exactly this:

body{
    background: linear-gradient(to bottom, #eee, rgba(222,112,6,0.2), #de7006);
}
1 Like