Gradiente do CSS

Fundo de transição

Os gradientes CSS permitem que você mostre uma transição suave entre duas ou mais cores especificadas.

O CSS define dois tipos de gradientes:

  • Gradiente linear((para baixo/para cima/para a esquerda/para a direita/diagonal))
  • Gradiente radial((definido pelo centro))

Gradiente linear CSS

Para criar uma gradiente linear, você deve definir pelo menos duas cores. As cores são as cores que você deseja apresentar uma transição suave. Você também pode definir o ponto de partida e a direção (ou ângulo) e o efeito de gradiente.

Sintaxe

background-image: linear-gradient(direção, color-stop1, color-stop2, ...);

Gradiente linear - de cima para baixo (padrão)

O exemplo a seguir mostra uma gradiente linear começando da parte superior. Ele começa com vermelho e transita para amarelo:

De cima para baixo (padrão)

Exemplo

#grad {
  background-image: linear-gradient(red, yellow);
}

Experimente você mesmo

Transição linear - De esquerda para direita

O exemplo a seguir mostra uma transição linear que começa da esquerda. Ela começa com vermelho e transita para amarelo:

De esquerda para direita

Exemplo

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

Experimente você mesmo

Transição linear - Diagonal

Você pode especificar posições horizontais e verticais de início para criar transições diagonais.

O exemplo a seguir mostra uma transição linear que começa no canto superior esquerdo (até o canto inferior direito). Ela começa com vermelho e transita para amarelo:

De cima esquerdo para baixo direito

Exemplo

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

Experimente você mesmo

Uso de ângulo

Se desejar mais controle sobre o ângulo da transição, você pode definir um ângulo para substituir as direções pré-definidas (para baixo, para cima, para direita, para esquerda, para direita e para baixo, etc.). O valor 0deg é igual a para cima (to top). O valor 90deg é igual a para direita (to right). O valor 180deg é igual a para baixo (to bottom).

180deg

Sintaxe

background-image: linear-gradient(angle, color-stop1, color-stop2);

Este ângulo especifica o ângulo entre a linha horizontal e a linha de transição.

O exemplo a seguir mostra como usar ângulos em transições lineares:

Exemplo

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

Experimente você mesmo

Uso de várias cores

O exemplo a seguir mostra uma transição linear com várias cores (de cima para baixo):

Exemplo

#grad {
  background-image: linear-gradient(red, yellow, green);
}

Experimente você mesmo

O exemplo a seguir mostra como usar cores arco-íris e texto para criar uma transição linear (de esquerda para direita):

Fundo de transição

Exemplo

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); 
}

Experimente você mesmo

Uso de transparência

As transições de CSS também suportam transparência e podem ser usadas para criar efeitos de transição.

Para adicionar transparência, usamos a função rgba(). O último parâmetro da função rgba() pode ser um valor entre 0 e 1, que define a transparência da cor: 0 representa total transparência, 1 representa cor completa (sem transparência).

O exemplo a seguir mostra um gradiente linear começando da esquerda. Ele começa completamente transparente, passando a completamente vermelho:

Exemplo

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Experimente você mesmo

Gradiente linear repetido

repeating-linear-gradient() A função é usada para gradiente linear repetido:

Exemplo

Gradiente linear repetido:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Experimente você mesmo