Search code examples
htmlcssbackground-color

HTML background two colors

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

Solution

  • 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%);