Como Criar Um Fundo Com Duas Cores Com CSS

Antigamente, quando precisávamos fazer um background onde tivesse duas cores, teríamos que utilizar uma imagem ou dividir em duas div diferentes o que poderia não ser tão prático.
Com a evolução do CSS, conseguimos agora criar um background com duas ou mais cores, da forma que quisermos!

Para isso, usamos a mesma propriedade background, porém com um pequeno detalhe a mais!

O grande segredo em ter diversas cores em um mesmo background é utilizarmos linear-gradient ou radial-gradient juntamente ao background.
Ficando algo semelhante ao seguinte trecho:

background: linear-gradient(red, yellow);

Também podemos usar uma variação com ângulo e a porcentagem do background que queremos preencher:

background: linear-gradient(
  90deg,
  rgba(2, 0, 36, 1) 0%,
  rgba(9, 9, 121, 1) 35%,
  rgba(0, 212, 255, 1) 100%
);

Fácil, não é mesmo?

Como exemplo do que podemos fazer, o desenvolvedor Kedar criou um codepen com diversos exemplos, que você pode visualizar neste link