Fill background-color with 2 colors height-wise

Question

I'm looking for a way to set the background-color of an HTML document with 2 colors instead of one. This kind of question has been asked before, but I want to set the two colors height-wise (split vertically) rather than width-wise.

score 1 · Accepted Answer · answered Feb 21 '21 at 17:47

1

I'm not sure what you found, but you can use linear-gradient for this:

body {
height: 100vh;
background: linear-gradient(0deg, rgba(204,0,0,1) 50%, rgba(0,212,255,1) 50%); 
}

<body>
</body>

You just need to set the angle to 0 deg

answered Feb 21 '21 at 17:47

disinfor

10,865
2
33
44

score 0 · Answer 2 · answered Feb 21 '21 at 17:51

You can define css like

#grad1 {
  height: 100%;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(orange, white, green);
}

and use this css in your div

<div id="grad1"></div>

Note: change color code and height as per your need

score 0 · Answer 3 · answered Feb 21 '21 at 17:56

you can do simply like this.

<div>
        <div className='first'>
          hello
        </div>
        <div className='second'>
          hi
        </div>
      </div>

Css:

.first{
  height: calc(50vh);
  background: blue;
}
.second{
  height: calc(50vh);
    background: red;
}

Fill background-color with 2 colors height-wise

3 Answers3