Question 184076 in Html Question posted in
Some basic documentation can be found here.

Html – 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

Tags:

3

Answers


  1. 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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0 
    body {
  background-image: linear-gradient(to top, green 50%, blue 50%);
  background-size: 100%;
  transition: background-position .5s;
  background-position: 0;
  border: none;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search