gradientes: a saga

vamos lá.. como a página "contato" estava com um grande vazio à direita, pensei que seria legal colocar ali uma imagem, tipo colocamos o banner na página inicial. no mesmo momento busquei no google uma imagem daqueles postes de barbearia que achei que ficaria show ali no ladinho.

mas eu queria que o formulário ficasse por cima da imagem, começando branco e ficando transparente (da esquerda para a direita) de modo que ia acabar "se misturando" com a imagem e dar um efeito mucho loco.

minha primeira ideia foi preencher o background de toda a área do formulário, criando uma classe, com um gradiente "vertical" (inclinado 90deg) que começasse em #FEFEFE e terminasse na imagem. logo vi que isso não era possível kk porque escrevendo a imagem dentro do background: linear-gradient(90deg, #FEFEFE, url("poste.jpg")); foi um flop total

mas eu sou brasileiro

fiz o contrário: criei classes e coloquei a imagem como background do fundo do formulário: HTML=

/*código oculto aqui pra cima*/

<main class="formulario">
            <div class="conteudo-formulario">

/*código oculto aqui pra baixo*/

CSS=

.formulario {
    background: url("poste.jpg");
}

feito isso, apliquei o gradiente ao campo do formulário, MAS seria um gradiente do branco #FEFEFE ao invisível, então fui ver no pai google se tinha um hexadecimal pra transparente. descobri que para cores em hexadecimal você pode usar 6 dígitos referentes ao RGB, como já fazemos (#RRGGBB) e também dá pra acrescentar 2 primeiros referentes a TRANSPARÊNCIA, sendo o máximo (FF) mais opaco e o mínimo (00) totalmente transparente. meti a cara:

.conteudo-formulario {
    width: 940px;
    padding: 3em 0;
    margin: 0 auto;
    background: linear-gradient(90deg, #FEFEFE, #00FEFEFE);
}

só que o bagulho ficou ciano!! então tentei no branco total e depois no preto total, a fim de entender como funcionava a propriedade antes de brincar com a transparência.. e com o preto o resultado ficou próximo do que eu queria:

.conteudo-formulario {
    width: 940px;
    padding: 3em 0;
    margin: 0 auto;
    background: linear-gradient(90deg, #FEFEFE, #00000000);
}

mas como é aplicado ao conteúdo do formulário, ele faz uma marca bem sólida, uma listra na margem esquerda, onde começa. e eu quebrei a cabeça pra arrumar isso... ...comecei com a lógica de várias cores no gradiente que o prof explica no vídeo, definindo porcentagens onde cada uma começa, imaginando que se eu começasse na cor transparente, depois a cor branca nuns 10% e transparente de novo lá pelos 60~70%, ficaria show. escrevi:

.conteudo-formulario {
    width: 940px;
    padding: 3em 0;
    margin: 0 auto;
    background: linear-gradient(90deg, #00000000, 10% #FEFEFE, 70% #00000000);
}

mas não funcionou como esperava.. e ficou basicamente tudo transparente e o formulário ficou ilegível.. tentei de várias formas, atribuindo % apenas ao primeiro valor e outros tantos malabarismos que nem lembro, mas nada deu certo..

ATÉ QUE

desisti de trabalhar com 3 cores e voltei pra 2 (a essa altura já estava trabalhando com preto e preto-transparente [#000000 e #00000000]) e fui observando o comportamento das coisas conforme eu mexia. a linha na laterl esquerda não sumia por nada, mas conforme eu diminuía o porcentual de início do preto opaco, ela se suavizava. e como números são números, coloquei número negativo (por fins meramente científicos):

.conteudo-formulario {
    width: 940px;
    padding: 3em 0;
    margin: 0 auto;
    background: linear-gradient(90deg, #000000 -70%, #00000000);
}

ficou bem suave e o "esfumaçado" atrás do texto melhorava a leitura (ah! mudei a fonte pra branco #FEFEFE) mas a linha ainda estava lá!

tinha que ter um jeito de mudar isso, de deixar um efeito natural, flutuante, BONITO, sabe? então eu coloquei um padding horizontal:

.conteudo-formulario {
    width: 940px;
    padding: 3em 13em;
    margin: 0 auto;
    background: linear-gradient(90deg, #000000 -70%, #00000000);
}

encontrei em 13 (a.k.a. #LULALIVRE) um número que sumia de vez com a linha! mas não to me sentindo muito we are the champions, não.. porque não sei se essa é a melhor solução. na minha cabeça ela é suscetível a erro, afinal, em uma tela maior a listra pode reaparecer??

e ficou assim por enquanto: