I want to horizontally split the background into two colors where one is black color. And de other one is a grandient of 2 colors like purple and pink

Question

body {
    height:100%;
    background: linear-gradient(top, #d808a4 50%, black 50%);
    background: linear-gradient(top, #d808a4 50%,black 50%);
    background: linear-gradient(to bottom, #d808a4 50%,black 50%);
    height: 229vh;
}

I want to horizontally split the background into two colors where one is black color. And I want the other one to be a gradient that goes from pink to purple, I have manage to split into purple and black, but i want a purple pink grandient, can someone help me?

Answer 1

#top-half {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: black;
}

#bottom-half {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 50%;
  background: linear-gradient(90deg, rgba(255,0,209,1) 0%, rgba(151,0,255,1) 100%);

}

<div id="bottom-half"></div>
<div id="top-half"></div>

2 divs for each half

position: absolute and left: 0 and top: 50% sets the position

width: 100% sets it to screen width

height: 50% sets the height for each one to half the screen width

background-color: black obviously sets the background color to black, and background: linear-gradient(90deg, rgba(255,0,209,1) 0%, rgba(151,0,255,1) 100%) sets the background to a gradient (you can generate nice CSS gradients at https://cssgradient.io/ )