Вы пытаетесь получить что-то подобное?
body{
height: 400px;
width: 400px;
background: linear-gradient(to top right, #9999FF 0%, #9999FF 50%, white 50%, white 100%);
}
<body>
<h1>Some dumy text...</h1>
</body>
Как это работает
В вашем фоне вы можете использовать линейный градиент, в этом вы можете сказать, в каком направлении он идет. В этом примере я использую «в верхнем правом углу», это делает так, чтобы начальный цвет начинался в нижнем левом углу, а конечный цвет - в верхнем правом.
Вы можете использовать все виды направлений, например, «внизу справа "или" вправо ".
Затем вы говорите, с какого цвета хотите, чтобы он начинался, в данном примере это какой-то синий цвет. Затем вы говорите ему, когда он должен прекратить использовать этот синий цвет, в этом примере 50%. Затем, если вам нужен белый цвет на другой стороне, вы говорите «белый 50%», и он начнет использовать белый до 100%.
Вы также можете попробовать другие интересные вещи с ним. Например, вы можете сказать, linear-gradient(to top right, blue 0%, blue 40%, white 60%, white 100%), что синий останавливается на 40%, а белый начинается на 60%. Теперь он будет переходить между ними.