Solucionado
Minha duvida é a seguinte: Tem como fazer um gradiente partindo da esquerda para a direita pegando 50 % da tela e um outro grandiente partindo da direita para a esquerda pegando os outros 50% da tela?
eu fiz assim mas não deu certo.
.titulo-principal { background-image: linear-gradient(to bottom right, white, red , black); background-repeat: no-repeat; background-image: linear-gradient(to bottom left, white, #851944, black); }
Propriedades repetidas são sobrescritas. No seu caso, a última background-image será a que vai valer.
Veja se esse é o resultado que quer:
.
Esse é o código:
<div style="width: 400px; height: 200px; background-image: linear-gradient(to bottom right, white, red, black, black, #851944, white);">
</div>Bom dia! Muito obrigado pela explicação. Axell na verdade eu queria que um gradiente venha da direita e a outro venha da esquerda e ambos do canto superior para baixo. No caso do seu exemplo ele tem todas as cores que eu quero porem partindo do canto esquerto superio para o canto direito inferior.
Exite algum jeito de fazer dessa forma?
Acho que entendi, então o que você quer é isto ?
.
Para ter esse resultado usei este código:
<div style="width: 400px; height: 200px; background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.5), rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(to bottom left, rgba(0, 0, 0, 0.5), rgba(133, 25, 68, 0.7), rgba(255, 255, 255, 0.5));">
</div>Não é muito fácil notar, mais o primeiro gradiente, na diagonal principal, é o white, red, black. Depois, na diagonal secundária, o gradiente é black, +/- roxo e white.
Você pode adicionar quantos linear-gradients você quiser colocando vírgulas:
background-image: linear-gradient(), linear-gradient(), ... ;Porém, se os gradientes usarem cores sólidas (opacas), um deles ficará em cima dos outros e, consequentemente, você vai acreditar que só um deles foi gerado.
A única forma de fazer com que cada um deles apareça é usar cores transparentes (observe que usei rgba() no código).
------------------------------------------
Se não quiser que as coisas fiquem tão transparentes, você vai precisar "remover" pelo menos uma das cores. Observe esse novo esquema:
.
Código de que o gerou:
<div style="width: 400px; height: 200px; background-image: linear-gradient(to bottom right, transparent, rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(to bottom left, rgba(0, 0, 0, 0.5), rgba(133, 25, 68, 1), transparent), linear-gradient(black, black);">
</div>Observe que além de remover algumas cores usando a palavra chave transparent, eu coloquei um fundo preto atrás de todos os gradientes.
Se quiser que o "roxo" apareça mais destacado, você vai ter que enfraquecer o vermelho e o preto, daí para frente é design e arte, não é a minha área kkk.
Muito obrigado Axell, você me ajudou muito, agora entendi.
vlw!!!