2

Como posso gerar um gradient como o dessa imagem?

Como ela tem mais um de tom de uma mesma cor, não estou conseguindo deixar igual.

.box {
  background-image: linear-gradient( to right, #ff7a2d, #ff507b ); 
  width: 100%;
  height: 300px;
  -webkit-transform: skewY(-1.5deg);
  -moz-transform: skewY(-1.5deg);
  -ms-transform: skewY(-1.5deg);
  -o-transform: skewY(-1.5deg);
  transform: skewY(-1.5deg);
}
<div class="box">
      <div class="wrapper">
      </div>
 </div>

inserir a descrição da imagem aqui

1
  • Jovem editei minha reposta resposta segundo o seu comentário, com uma saturação nas cores usando mix-bland-mode, depois olha lá
    – hugocsl
    25/02/2018 às 16:52

1 Resposta 1

2

Jovem trocando o linear-gradiente pelo radia-gradiente eu consegui chagar a um resultado bem próximo da imagem. Também usei 4 cores e não 2, começando do topo do box a direita.

O CSS do gradiente ficou assim:

background-image: radial-gradient(circle at top right, #ff9bb4, #ff507b, #ff7a2d, #f55a00 );

Veja o resultado:

.box {
  margin-top: 100px;
  background-image: radial-gradient(circle at top right, #ff9bb4, #ff507b, #ff7a2d, #f55a00 );
  width: 100%;
  height: 300px;
  -webkit-transform: skewY(-1.5deg);
  -moz-transform: skewY(-1.5deg);
  -ms-transform: skewY(-1.5deg);
  -o-transform: skewY(-1.5deg);
  transform: skewY(-1.5deg);
}
<div class="box">
    <div class="wrapper">
    </div>
</div>

OBS: Quanto mais largo o BOX mas ténue vai ficar o degrade e a transição das cores, quanto mais estreito o BOX, mas perceptível vai ficar a transição entre uma cor e outra.


EDIT: Variação com Dois Gradientes, um linear e outro radial, um por cima do outro com mix-blend-mode: overlay;.

De acordo com o seu comentário na minha resposta é o mix-blend-mode: overlay; que vai dar o tom"saturado" tanto na parte de cima do gradiente quanto embaixo. Mas para fazer isso precisei criar um outro elemento por cima do gradiente, pois para usar o bland-mode precisei separa os backgrounds, não dava pra usar os dois em um elementos só.

Veja como ficou no Snippet abaixo

.bgc {
    position: relative;
  background-image: radial-gradient(circle at top right, #ff9bb4, #ff507b, #ff7a2d, #f55a00 ) ;
  width: 100%;
  height: 300px;
  -webkit-transform: skewY(-1.5deg);
  -moz-transform: skewY(-1.5deg);
  -ms-transform: skewY(-1.5deg);
  -o-transform: skewY(-1.5deg);
  transform: skewY(-1.5deg);
}
.filtro {
    width: 100%;
    height: 300px;
    background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0), rgba(0,0,0,0),rgba(0,0,0,0.4));
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    mix-blend-mode: overlay;
}
<div class="bgc">
    <div class="filtro"></div>
</div>

Você pode ir trabalhando as transparências do linear-gradiente, ate chegar no tem que vc acha ideal.

3
  • Será que é possível passar mais cores como parâmetro? Por que na parte de baixo tem um tom mais escuro das cores. 25/02/2018 às 15:37
  • Sim é possível, olha a segunda parte da resposta, na edição que fiz.
    – hugocsl
    25/02/2018 às 15:44
  • O problema é que diminuindo a transparẽncia deixa um tom mais preto e não um tom mais forte da respectiva cor. Ou seja, um laranja quase vermelho e um rosa mais forte. 25/02/2018 às 15:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .