Search code examples
htmlcsscolorsbackground

How to make background color shift gradually into another color?

I would like to make my website's background shift color halfway.

It should fade over to the other color. How could I do that?

The top of the website is green and halfway down it changes to blue, like this:

website background color changes halfway down

Solution

  • Super easy, use linear-gradient(), also add background-attachment:fixed; to make sure that the gradient isn't repeating.

    body {
    background-image: linear-gradient(#d3ff6e, #00faff); /* customize colors here */
    background-attachment: fixed; 
}
    <html>
    <body></body>
</html>

    If you want to make the yellow color a bit more visible, add a percentage after the color like below:

    body {
    background-image: linear-gradient(#d3ff6e 35%, #00faff); /* customize colors here */
    background-attachment: fixed; 
}
    <html>
    <body></body>
</html>