Search code examples
htmlcsscolorsbackgroundlinear-gradients

How to make background color transition gradually into another color?

I would like to make my website's background to form a gradient from green at the top to blue halfway down the page, with a smooth gradient between the two colors.

How can I achieve this?

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>