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:

1
background: linear-gradient(red, yellow);

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

1
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