4

Eu queria saber se é possível fazer a segunda cor desse gradiente se expandir e se destacar no meio dessas duas cores em uma animação CSS, e se for como eu faço.

body {
  background: linear-gradient(90deg, tomato, skyblue, rgb(255, 148, 61));
}
<!DOCTYPE html>
<html>
  <body>
  
  </body>
</html>

1 Resposta 1

5

Na função linear-gradient você pode informar em qual porcentagem irá iniciar uma determinada cor dentro do gradiente. Por exemplo, você pode configurar que se inicia com a cor tomato e chegue ao skyblue nos 10% do gradiente; mantenha o skyblue até os 90% e depois vá até o rgb(255, 148, 61) nos 100%.

Assim, o azul ficará em destaque em cerca de 80% do gradiente, ficando 10% colorido em cada lateral.

body {
  background: linear-gradient(to right, tomato, skyblue 10%, skyblue 90%, rgb(255, 148, 61) 100%);
}
<!DOCTYPE html>
<html>
  <body>
  
  </body>
</html>

5
  • Exatamente isso que eu queria, muito obrigado. Commented 21/09/2021 às 19:04
  • como eu faço isso em animação? Commented 21/09/2021 às 19:26
  • Aí depende da animação, mas de qualquer forma isso seria discussão para outra pergunta
    – Woss
    Commented 21/09/2021 às 19:35
  • A animação que eu queria era que o skyblue expandisse Commented 21/09/2021 às 19:38
  • Então é só criar os frames configurando as porcentagens...
    – Woss
    Commented 21/09/2021 às 19:42

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 .