HTML background two colors

18,965

Use a css gradient: https://css-tricks.com/css3-gradients/

background: linear-gradient(blue, yellow);

Or if you want don't want the gradual fade you have to set the position:

background: linear-gradient(to right, blue 0%, blue 50%, yellow 50%, yellow 100%);
Share:
18,965
darkchampionz
Author by

darkchampionz

Updated on June 04, 2022

Comments

  • darkchampionz
    darkchampionz almost 2 years

    I use this code to make the background blue:

    <!DOCTYPE html>
    <html>
    <body style="background-color:blue;">
    </body>
    </html>
    

    Which works good but how can I make the background have two different colors? 50% to be blue and the rest 50% to be yellow for example, split horizontally...