2

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

123Hello
  • 23
  • 6
  • Does this answer your question? [Fill background color left to right CSS](https://stackoverflow.com/questions/17212094/fill-background-color-left-to-right-css) – Komeil Mehranfar Jun 11 '23 at 15:41

3 Answers3

1

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>
Kevin M. Mansour
  • 2,915
  • 6
  • 18
  • 35
0

Not sure if this is what you need as there is no picture attached.

But try this:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: colorshift 5s infinite;
            font-family: Arial, sans-serif;
        }

        @keyframes colorshift {
            0% {background: #eee;}
            50% {background: #000;}
            100% {background: #eee;}
        }

        h1 {
            color: white;
        }
    </style>
</head>
<body>
    <h1>Welcome to my website!</h1>
</body>
</html>

If this isn't what you need, please be more precise in formulating your question.

Eigen
  • 43
  • 8
0
body {
  background-image: linear-gradient(to top, green 50%, blue 50%);
  background-size: 100%;
  transition: background-position .5s;
  background-position: 0;
  border: none;
}
Hiren Gabu
  • 89
  • 1
  • 2